mA 图 灵 程 序 设计 丛书 , 


[Æ] Jake Rutter € 
muB B 


Smashing jQuery 


PE C^ 
jQuery 


人 民 邮 电 出 版 社 


POSTS & TELECOM PRESS 


S 


iy MMIEMIUTEAMT 


[38] Jake Rutter # 
as S 


Smashing jQuery 


精彩 绝伦 的 
jQuery 


人 民 邮 电击 版 社 
北 京 


图 书 在 版 编目 (C I PD 


数据 


精彩 绝伦 的 jQuery / CE) 拉 特 (Rutter, J.) 3 i 


魏 忠 译 . 一 北京 : 人 民 邮 电 
《图 灵 程序 设计 丛书 ) 
书 名 原文 : Smashing jQu 
ISBN 978-7-115-28065-7 


I. Oe II. Ofre 
Feizit IV. @TP312 


ery 


出 版 社 ，2012.5 


@ 魏 … II. QJAVATE E — f 


中 国 版 本 图 书馆 CIP 数 据 核 字 (2012) 58081887 7 


本 书 是 jQuery 基础 教程 ， 通 过 


内 容 提要 


大 量 实用 技巧 、 案 例 、 示 例 分 4 部 分 全 面 讲 解 了 jQuery 开发 。 第 一 部 分 


介绍 jQuery 与 JavaScript 库 , 以 及 jQuery 带 来 的 巨大 便利 。 第 二 部 分 重点 论述 jQuery 基础 知识 ， onis 


事件 与 特效 。 第 三 部 分 探讨 jQuery 应 用 ， 


包括 用 jQuery 改进 Web 表单 验证 等 内 容 。 第 四 部 分 是 jQuery 高 


级 技术 分 析 ， 如 使 用 和 编写 插件 、 处 理 Ajax 请 求 、 编 写 移动 应 用 。 另 外 ， 本 书 最 后 盘点 了 jQuery 线 上 资源 。 
本 书 适合 Web 设计 人 员 及 前 端 开 发 人 员 学 习 参 考 。 


4 
ag 


x 


译 


图 灵 程 序 设计 丛书 


精彩 绝伦 的 jQuery 


[ 美 ] Jake Rutter 


责任 编辑 EA 


* 人 民 邮 


邮编 
网 址 
北京 
@ 开本 : 
印张 
字数 : 
印 数 : 


100061 


去 
A 


电 出 版 社 出 版 发 行 。” ”北京 市 崇文 区 夕照 寺 街 14 号 


电子 邮件 ”315@ptpress.com.cn 


http://www.ptpress.com.cn 


800 X 1000 
18.25 

430 TF. 

1 - 3 500 册 


印刷 
1/16 
彩 插 4 
2012 年 5 月 第 1 版 
2012 年 5 月 北京 第 1 次 印刷 


著作 权 合同 登记 号 ”图 字 : 01-2011-2968 号 
ISBN 978-7-115-28065-7 


EM: 59.0076 


读者 服务 热线 : (010)51095186 转 604” 印 装 质 量 热线 : (010)67129223 
反 盗 版 热线 : (010)67171154 


版 权 声 明 


Original edition, entitled Smashing jQuery, by Jake Rutter, ISBN 978-0-470-97723-1, published by 
John Wiley & Sons, Inc. 

Copyright © 2011 by John Wiley & Sons, Inc. All rights reserved. This translation published under 
License. 

Simplified Chinese translation edition published by POSTS & TELECOM PRESS Copyright © 2012. 


Copies of this book sold without a Wiley sticker on the cover are unauthorized and illegal. 


本 书简 体 中 文 版 由 John Wiley & Sons, Inc. 授 权 人 民 邮 电 出 版 社 独家 出 版 。 
本 书 封 底 贴 有 John Wiley & Sons, Inc. 激 光 防 伪 标 签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 


了 中 


前 


在 我 每 日 的 Web 设 计 与 开发 工作 中 ,jQuery 是 必 不 可 少 的 一 部 分 。Wiley 出 版 社 联络 到 我 , 希 
望 我 写 一 本 关于 jQuery 的 书 ， 这 让 我 既 激 动 义 慢 锅 。jQuery 让 Web 设 计 有 望 走 进 一 个 无 所 不 能 的 
新 世界 。 我 希望 能 通过 这 本 书 ， 告 诉 人 们 如 何 使 用 jQuery 提高 开发 效率 ， 以 及 如 何 编写 人 机 交互 
组 件 ， 而 后 者 人 们 普遍 认为 没有 高 深 的 编程 知识 就 不 可 能 做 到 。 

本 书 既 是 jQuery 入 门 读物 ， 又 是 一 本 jQuery 实用 指南 ， 书 中 的 例子 都 是 实际 Web 开 发 过 程 中 
的 解决 方案 ， 因 此 读者 完全 可 以 将 本 书 作为 日 常 开 发 工作 的 手边 书 。 本 书 内 容 分 为 4 部 分 ， 下 面 


将 分 别 介绍 。 


第 一 部 分 jQuery 5 JavaScript 简介 


本 部 分 主要 是 向 初学 者 介绍 jQuery。 这 一 部 分 介绍 了 JavaScript 库 ， 以 及 这 些 库 如 何 一 步 步 
走 进 Web 设 计 师 和 开发 者 的 “工具 箱 ” ， 并 逐渐 成 为 其 中 的 重要 角色 。 其 中 重点 阐释 了 jQuery 带 
来 的 巨大 便利 ， 让 你 彻底 搞 清楚 jQuery 如 此 流行 的 原因 。 本 部 分 还 谈 及 了 渐进 增强 技术 的 重要 
性 。 在 和 弄 清楚 为 什么 要 使 用 jQuery 之 后 ， 我 们 马上 开始 学 习 使 用 jQuery 并 将 它 应 用 到 Web 站 点 。 


第 二 部 分 jQuery 基础 


本 部 分 带 你 一 步 步 全 面 了 解 jQuery 的 基础 知识 ， 比 如 使 用 选择 需 、 事 件 及 特效 等 。jQuery 的 
选择 器 极其 强悍 ， 因 此 我 专门 拿 出 整整 一 章 的 篇 幅 详细 介绍 各 种 选择 咒 ， 不 但 介绍 用 法 ， 还 给 
出 了 例子 。 本 部 分 还 介绍 了 事件 和 特效 ， 学 好 它们 ， 你 就 为 创建 Web 应 用 和 UI 组 件 打 好 了 坚实 
基础 。 


第 三 部 分 jQuery 应 用 


第 三 部 分 的 主题 是 把 前 面 学 到 的 jQuery 知识 应 用 于 具体 的 Web 站 点 或 应 用 程序 。( 第 二 部 分 有 
零 零 散 散 的 例子 ， 但 没有 完整 的 解决 方案 ， 比 如 如 何 创建 一 个 折 和 县 菜单 或 标签 式 导 航 等 。) 本 部 
分 还 包括 使 用 jQuery 改进 Web 站 点 表单 验证 的 内 容 。 


2 前 


wp 


第 四 部 分 “jQuery 高 级 技术 


每 位 jQuery 开发 者 都 希望 了 解 jQuery 高 级 技术 ， 如 使 用 和 编写 插件 、 用 jQuery 处 理 Ajax 请 求 ， 
或 者 用 jQuery 编写 移动 应 用 。 第 四 部 分 深入 研究 了 这 些 高 级 主题 。 此 外 ， 我 还 专门 拿 出 第 12 章 盘 
点 了 所 有 的 jQuery 线 上 资源 。 


读者 对 象 


本 书面 向 那些 刚刚 开始 使 用 jQuery 的 Web 设 计 师 和 前 端 开发 人 员 。 可 能 你 已 经 知道 jQuery 插件 
怎么 安装 , 但 还 不 清楚 怎么 写 , 或 者 在 网 上 常常 听 人 说 起 jQuery 多 么 了 不 起 , 正 想 学 习 jQuery 以 改 
进 自己 的 站 点 , 那么 请 阅读 本 书 吧 。 值得 提 一 下 的 是 , 本 书 的 读者 最 好 熟悉 HIML、CSS 知 识 并 了 
解 基 本 的 JavaScript 知 识 。 


关于 本 书 
初次 出 现 的 术语 会 印刷 成 楷体 , 需要 你 键入 的 内 容 使 用 粗 体 。 书 中 全 部 例子 使 用 Firefox 浏 览 


EM, ZIE 6+ Firefox 2.0 + . Safari 3.0 + Opera 9.0 + I Chrome? Vids. cir PAP 
中 的 示例 代码 ， 请 访问 www.wiley.com/go/smashingjquery”。 


CD 示例 代码 也 可 在 图 灵 社 区 (ituring. com. en ) 本 书 网 页 免费 注册 下 载 。 一 一 编者 注 
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认识 jQuery 


jQuery 是 一 个 JavaScript 库 , 它 通 过 封装 原生 JavaScript 函 数 得 到 了 一 整套 定义 好 的 方法 。 这 些 
方法 能 有 效 地 帮助 Web 设 计 师 和 开发 者 快捷 编写 和 扩展 JavaScript 交 互 组 件 。 jQuery 没有 提供 任何 
新 的 功能 ， 它 最 大 的 贡献 是 把 JavaScript 难 懂 难 用 的 API 整 理 成 了 易 懂 易 用 的 jQuery 语法 ， 从 而 赢 
得 了 无 数 的 用 户 。 

在 本 章 中 ,我 们 一 起 了 解 JavaScript 库 带 来 了 哪些 便利 ， 有 哪些 与 jQuery 近似 的 库 ， 并 深入 了 
解 jQuery 的 特性 ， 搞 清 是 哪些 因素 造就 了 伟大 的 jQuery。 


1.4 探索 JavaScript Æ 


构建 在 原生 JavaScript 指 令 上 的 常用 函数 构成 了 库 , 库 使 得 Web 设 计 师 和 开发 者 能 方便 地 增强 
页 面 的 交互 能 力 及 可 用 性 。 

我 们 可 以 把 库 当 成 一 种 框架 或 者 蓝图 ， 指 导 构 建 Web 站 点 的 一 套 规则 或 者 指南 。 对 设计 师 
和 开发 者 来 说 ,使 用 JavaScript 库 写 代码 更 容易 库 是 一 个 起 点 ,有 很 多 流行 的 库 , 如 Prototype、 
MooTools、Dojo、YUI， 当 然 还 有 本 书 的 主角 jQuery， 它 们 被 广泛 应 用 于 网 络 的 每 个 角落 。 不 
同 的 库 侧 重点 有 所 不 同 ，jQuery 擅 长 操作 维护 DOM (Document Object Model ,文档 对 象 
模型 )。 

DOM 实 际 上 把 代表 Web 页 面 的 HTML 代 码 表示 成 一 个 树 形 结构 , 其 中 每 个 枝 权 都 是 属于 一 个 
层次 结构 的 、 彼 此 连接 的 一 个 节点 。 绝 大 多 数 情况 下 都 通过 CSS 访 问 这些 节 点 〈 设 置 样式 )， 或 
借助 选择 器 通过 JavaScript 访 问 它们 。HTML 标 准 委员 会 制定 了 维护 HTML Web 页 面 的 API 
( Application Programming Interface， 应 用 编程 接口 )， 也 就 是 DOM， 供 Web 设 计 师 和 开发 者 使 用 。 
HTML5 为 DOM 补 充 了 一 些 新 的 API， 这 些 API 能 为 因特网 提供 更 好 的 用 户 体验 。 当 网 页 完全 加 载 
之 后 ，DOM 就 准备 好 和 用 户 进行 交互 了 。 
通过 在 页 面 中 包含 一 个 库 文件 ， 设 计 师 和 开发 者 就 可 利用 库 中 提供 的 特制 方法 扩展 DOM。 


1.1.1 JavaScript 库 优 于 传统 解决 方案 之 处 


使 用 JavaScript 库 最 大 的 好 处 是 能 避 开 那些 乏味 的 非 交 互 内 容 ， 利 用 库 提 供 的 大 量 方法 扩展 
Web 页 面 。 
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JavaScript 库 让 Web 设 计 师 和 开发 者 能 够 更 方便 地 处 理 特效 、 动 画 、 事 件 、Ajax 及 用 户 交 互 
组 件 ， 从 而 提高 开发 效率 。Web 设 计 师 和 开发 者 不 必 局 限于 库 提供 的 功能 ， 完 全 可 以 自己 实现 需 
要 的 功能 。 

对 那些 了 解 DOM 的 Web 设 计 师 来 说 ， 与 使 用 原生 JavaScript 的 有 限 API 相 比 ， 使 用 JavaScript 
库 操 作 DOM 更 加 简单 。 

如 果 没 有 JavaScript 库 ， 使 用 原生 JavaScript 实 现 同样 的 功能 ， 那 么 我 们 将 不 得 不 花费 数 个 小 
时 ， 度 过 漫漫 长 夜 ， 苦 苦 编 程 、 测 试 、 握 “ 虫 *， 最 后 写 出 长 得 吓人 的 代码 。JavaScript 库 能 有 效 、 
大 幅 地 减少 代码 数量 ， 比 如 实现 同一 目标 时 ， 若 使 用 原生 JavaScript 需 要 写 400 行 代码 ， 而 使 用 库 
的 话 则 可 能 只 需要 写 100 行 甚至 更 少 。 

使 用 JavaScript 库 的 另 一 个 好 处 是 可 以 避免 重复 代码 。 因 为 要 写 一 些 JavaScript 函 数 来 完成 相 
似 的 任务 时 , 我 们 往往 最 终 收 获 许多 相似 的 代码 , 但 如 果 用 上 了 JavaScript 库 , 你 就 能 消除 绝 大 部 
分 的 重复 代码 。 


1.1.2 ”主流 JavaScript 库 


目前 ， 大 约 有 20 个 (目前 开发 活跃 的 ) JavaScript 库 ， 其 中 有 5 个 库 最 流行 ， 它 们 是 YUI、 
Prototype, MooTools, 、Dojo 和 本 书 的 主角 jQuery。 它 们 之 所 以 脱颖而出 ， 是 因为 很 好 用 ， 并 且 都 
有 着 巨大 的 用 户 群 。 绝 大 多 数 库 之 间 的 差异 主要 在 于 库 的 体积 及 浏览 器 支持 程度 不 同 。 
我 即将 探讨 的 5 个 库 都 是 开源 项 目 ， 这 意味 着 每 个 人 都 可 以 为 这 些 库 贡 献 源 代码 。 微 软 的 软 
件 是 不 开源 的 ,是 专属 于 微软 公司 的 软件 。 微软 公司 雇用 程序 员 开 发 软件 ,然后 销售 这 些 软 件 并 
收取 授权 费 。 交 纳 授权 费 之 后 ， 软 件 用 户 通常 在 一 定期 限 之 内 有 权 使 用 这 些 软件 , 并 且 可 在 遇 到 
麻烦 时 从 微软 公司 得 到 帮助 。 

开源 软件 与 之 不 同 。 任何 人 都 能 够 下 载 源 代码 并 对 其 进行 改进 ， 这样 会 造就 更 好 的 代码 。 
为 所 有 的 代码 都 是 由 志愿 者 写 就 的 , 而 所 有 志愿 者 拥有 同一 个 目标 一 一 写 出 更 好 的 软件 ( 而 不 是 
赚钱 )。 由 于 不 必 支 付 任何 费用 ， 这 些 库 尽 可 随意 使 用 。 网 上 的 开源 社区 极为 庞大 ， 有 数 百 万 用 
户 通 过 博客 或 论坛 贡献 内 容 ， 而 今 Web 设 计 师 和 开发 者 在 遇 到 问题 时 可 非常 容易 地 得 到 支持 。 

在 学 习 JavaScript 库 的 过 程 中 要 牢记 一 点 , 你 正在 学 习 的 库 就 像 一 种 新 语言 一 一 没 错 , 它 确实 
是 JavaScript 语 言 的 另 一 种 演绎 。 

1.YUI 

YUI ( Yhaoo! User Interface， 雅 虎 用 户 界面 ) JavaScript 库 由 雅虎 开发 者 网 络 于 2005 年 发 布 ， 
它 采用 的 是 BSD 许 可 证 4-BSD 许 可 证 允许 以 极其 自由 的 方式 传播 软件 ,与 其 他 类 似 许可 证 ( 如 GNU 
GPL) 相 比 ，BSD 许 可 证 对 软件 传播 的 限制 最 少 。YUI 完 全 兼容 IE 6+, Firefox3+, Safari 3+ 以 及 
Opera 10+。 

YUI 库 文件 的 总 大 小 约 31 KB。 

为 了 让 你 了 解 一 下 YUI 代 码 是 个 什么 样子 , 下面 列 出 了 一 段 JavaScript 代 码 ,， 它 演示 了 如 何 使 
用 YUI 库 实现 click 事 件 。 这 段 代码 中 的 click 事 件 分 为 两 部 分 : 一 个 是 click 事 件 发 生 时 被 调用 
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的 函数 ， 一 个 是 click 事 件 本 身 。 这 些 代码 因为 使 用 了 YUI 专 用 语法 显得 不 那么 优雅 。 


function handleClick(e) { 
Y.log(e); 
} 
YUI().use('node-base', function(Y) { 
Y.on("click", handleClick, "#foo"); 
1); 


2. Prototype 

Prototype 库 由 Sam Stevenson 创 建 。 由 于 是 和 非常 流行 的 Web 快 速 开 发 框架 Ruby on Rails 绑 定 
发 布 的 第 一 个 JS 框架 ， 它 很 快 流行 起 来 。 由 于 它 是 Ruby on Rails 的 一 部 分 ， 我 总 感觉 它 并 不 适合 
Web 设 计 师 ， 而 是 更 适合 专业 Web 开 发 者 结合 Ruby on Rails 使 用 。 

Prototype 库 是 一 个 包含 Ajax 功能 的 基础 库 ， 随 着 它 的 辅助 库 Scriptaculous 的 加 入 ，Prototype 
库 的 功能 越 来 越 丰 富 。Scriptaculous 负 责 提供 特效 及 用 户 界面 元 素 ， 是 一 个 只 能 与 Prototype 一 起 
使 用 的 库 。Prototype 库 的 主要 缺点 在 于 尺寸 : 所 有 JavaScript 文 件 加 起 来 大 约 有 278 KB. 

对 没有 多 少 经 验 的 前 端 开 发 者 来 说 ，Prototype 和 Scriptaculous 库 的 文档 是 相当 难以 理解 的 。 和 
其 他 库 一 样 ，Prototype 也 有 一 个 技术 支持 社区 。 不 过 由 于 它 的 语法 相当 复杂 ，Prototype 终 究 是 一 
个 难以 学 习 的 库 。 为 了 让 你 感受 一 下 Prototype 代 码 ， 下 面 的 代码 演示 了 如 何 使 用 Prototype 库 人 处理 
click 事 件 。 这 里 的 click 事 件 用 法 看 上 去 与 jQuery 中 的 非常 类 似 , 别 让 表象 欺骗 了 你 一 一 Prototype 
中 许多 的 其 他 方法 代码 要 比 这 个 复杂 得 多 ， 而 且 看 起 来 不 太 像 jQuery。 

$("foo").observe("click", function() { 


alert ('Clicked!'); 
1); 


3. MooTools 

MooTools 库 首次 发 布 于 2006 年 , 与 Prototype 有 相似 之 处 一 一 语法 ( 相对 复杂 ) 适合 中 高 级 Web 
设计 人 员 和 开发 人 员 。MooTools 是 一 个 面向 对 象 的 框架 ， 它 以 面向 对 象 的 方式 增强 了 JavaScript 
API， 也 为 Web 页 面 提供 一 些 人 机 交互 功能 。MooTools 适 合 那些 喜欢 纯净 JavaScript 的 人 。 

下 面 是 使 用 MooTools 库 处 理 click 事 件 的 代码 示例 : 


$('foo').addEvent ('click', function() {}); 

4. Dojo 

Dojo 最 早 的 版 本 发 布 于 2004 年 ， 它 的 设计 目标 是 创建 兼容 各 种 浏览 器 的 Web 应 用 ， 为 站 点 平 
滑 地 添加 交互 功能 。Dojo 的 语法 相当 复杂 , 给 人 的 感觉 就 是 在 写 原 生 JavaScript, 它 针对 的 用 户 群 
是 那些 有 经 验 的 前 端 开发 人 员 ， 它 的 用 法 和 思想 不 太 适 合 初 学 者 。 

下 面 是 使 用 Dojo 库 处 理 click 事 件 的 代码 示例 : 

fooNode = dojo.byId("foo"); 


fooConnections = []; 
fooConnections.push(dojo.connect(fooNode, 'onclick', foo)); 


看 看 前 面 这 些 例子 ， 这 些 JavaScript 库 的 语法 相当 吓人 。 现 在 我 们 看 看 jQuery 怎么 处 理 click 
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$i'ffoo').click(function() ( 


// 单 击 事件 


«lin. 


3) 


1.1.3 jQuery 的 高 明之 处 


jQuery 天 生 “ 聪 敏 过 人 ”。 比较 一 下 前 面 的 代码 示例 , 显然 jQuery 版 本 最 简洁 , 也 最 容易 理解 。 
这 是 jQuery 的 高 明之 处 一 一 简单 直接 。 没 有 多 余 的 雕饰 ， 没 有 费解 的 代码 ， 写 jQuery 不 需要 专业 
的 后 端 编程 知识 ， 不 过 这 并 不 是 说 jQuery 只 能 干 点 简单 的 小 活 。 

1-1 展 示 的 是 jQuery 官方 网 站 http://jquery.com。 


jQuery: The Write Less, Do More, JavaScript Library 


(<)»)-@ fe) BS (http: //iquery.com/ wv) Gir a 
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jQuery Plugins Ul Meetups Forum Blog About Donate 
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write JavaScript. 
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WHO'S USING JQUERY? 


LEARN JQUERY NOW! JQUERY RESOURCES 


What does jQuery code look like? Here's the Getting Started With jQuery Developer Resources 
ERT ee 


图 1-1 jQuery 官方 网 站 


1. jQuery 简 史 

jQuery 发 布 于 2006 年 ， 其 创建 者 John Resig 受 够 了 当时 那些 复杂 的 JavaScript 库 ， 因 此 发 明 
了 jQuery。jQuery 让 Web 设 计 师 和 开发 者 能 够 用 更 简洁 的 代码 处 理 Web 站 点 上 的 高 级 JavaScript 
功能 。 

jQuery 做 到 了 无 需 专 业 编 程 技能 就 能 处 理 DOM， 这 相当 了 不 起 。 当 然 ，jQuery 在 某 些 高 级 
领域 也 需要 使 用 者 具备 一 定 的 JavaScript 基 础 ， 比 如 在 表单 内 使 用 Ajax 方法 获取 内 容 或 提交 内 容 


AE 
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(参见 第 9 章 )、 编 写 jQuery 插 件 (参见 第 11 章 )， 以 及 创建 移动 Web 站 点 (参见 第 10 章 )。 

在 过 去 的 4 年 里 , 我 认识 的 几乎 每 一 位 设计 师 或 开发 者 都 在 一 些 领域 使 用 或 曾经 用 过 jQuery。 
当 我 问 他 们 为 什么 选择 jQuery 时 , 他 们 往往 反问 :“ 还 有 比 它 更 容易 的 吗 ? ”使 用 jQuery 是 如 此 容 
易 , 这 着 实 吸引 了 大 量 的 用 户 。 借 助 jQuery, 你 无 需 拥 有 计算 机 科学 硕士 学 位 , 一 样 能 够 通过 Ajax 
提交 表单 。 

jQuery 库 擅长 处 理 哪 些 事 ? 答案 是 使 用 原生 JavaScript API 能 做 的 任何 事 。 我 会 在 本 书 中 深入 
讲解 jQuery 的 各 个 功能 ， 这 里 先 概要 地 列 出 jQuery 的 主要 功能 。 
口 事件 处 理 : 和 鼠标、 键盘、 表单 及 用 户 交 互 。 
OQ 特殊 效果 : 显示 / 隐藏、 滑动 、 淡 入 淡出 、 自 定义 动画 。 
口 动画 : 允许 使 用 CSS 和 原生 效果 移动 页 面 元 素 。 
O Ajax: 使 用 XML 或 JSON 与 服务 器 端 表单 处 理 交 互 。 
口 易于 扩展 : 编写 插件 扩充 jQuery 核心 API。 
口 处 理 DOM。 
口 处 理 CSS。 
口 实用 功能 : 浏览 器 检测 及 更 容易 使 用 常用 的 JavaScript 功 能 。 

2. jQuery 用 户 

jQuery 的 主流 用 户 群 是 Web 设 计 师 和 开发 者 。jQuery 广 泛 用 于 各 种 站 点 ， 包 括 中 小 型 站 点 和 
成 熟 的 企业 站 点 。jQuery 是 自由 软件 ， 因 此 大 多 数 的 设计 师 和 开发 者 都 用 它 。 它 让 那些 从 来 没 写 
过 程序 的 web 设计 师 尝 到 了 使 用 JavaScript 的 甜头 ， 开 始 为 自己 的 站 点 添加 一 些 很 酷 的 效果 。 

自从 谷歌 和 微软 开始 为 jQuery 提供 文件 托管 服务 ，jQuery 风 头 更 盛 。 所 谓 托管 服务 就 是 将 文 
件 存放 到 一 个 Web 服 务 器 上 一 一 换言之 就 是 将 文件 存放 到 CDN (Content Delivery Network， 内 容 
分 发 网 络 ) 上 一 一 从 而 为 使 用 该 文件 的 站 点 提供 更 好 的 性 能 。 谷 歌 和 微软 的 这 一 举动 表明 ,在 开 
源 的 JavaScript 库 社区 当中 , jQuery 当之无愧 成 为 推荐 使 用 的 主流 JavaScript 库 。 谷歌 .BBC、 戴尔 、 
美国 银行 、 美 国 职业 棒球 大 联盟 、NBC 和 Netflix， 这 只 是 日 益 增多 的 、 在 开发 Web 站 点 方面 使 用 
jQuery 库 的 一 部 分 大 公司 。 多 年 以 来 ，Netflix 这 家 通过 直 发 电子 邮件 和 网 上 渠道 经 营 电影 租赁 业 
务 的 Web 站 点 , 一 直 利 用 高 级 JavaScript 技 术 来 驱动 用 户 界 面 。 图 1-2 展 示 了 一 个 用 jQuery 创建 的 菜 
单 〈 当 鼠标 悬 停 在 电影 标题 上 时 该 菜单 会 自动 出 现 )， 这 样 用 户 无 需 离开 这 个 页 面 就 可 以 看 到 更 
多 的 信息 。 

3. 如 何 使 用 Query 

jQuery 很 容易 使 用 。 和 使 用 其 他 JavaScript 库 一 样 ， 需 要 将 库 包 含 到 页 面 的 <head></head> 
标签 之 间 。 下 面 的 代码 演示 了 如 何 把 jQuery 库 包 含 到 站 点 : 


<!doctype html» 
«html» 
«head» 


«script type-"text/javascript" src-"jquery-1.4.2.js"»«/script» 
<script type="text/javascript"></script> 
</head> 
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<body> 
<a href="http://jquery.com/">jQuery</a> 
</body> 
</html> 


eoo Netflix 


hajr | I [U hup: //www.netflix.com/WiRecentAdditions?Inkctr=mhWNRA e | (Qr Google 


NETFLIX 


Home Play mE TV Help 


Watch Movies & TV Episodes Instantly 
New Arrivals 


New movies to watch instantly The Sandlot 
1993 [PG] 101 minutes 
Surrogates The Sandlot Eager to make friends, new-kid-in-town Scotty heads $ 
for the neighborhood sandlot hoping to join a pickup 
baseball game. He's not any good, but the others T 
grow to accept him as they teach him about the sport. 6 


Starring: Denis Leary, James Earl Jones. 
Director: David M. Evans 
Genre: Family Comedies 
Format: DVD and streaming stam o 


t seeded 4.4 Our bestguess for Jacob 


(@ Recommended based on your interest in Happy 
Giimore, Remember the Titans and Billy Madison 


New TV to watch instantly 


Avatar: The Last Airbender: Arrested Development: Season 
Book 3 2 


图 1-2 Netflix 站 点 


把 jQuery 库 添 加 到 页 面 之 后 ， 你 就 可 以 使 用 jQuery API 通 过 DOM 访 问 页 面 的 不 同 部 分 。 对 绝 
大 多 数 Web 设 计 师 和 开发 者 而 言 ， 这 些 工作 他 们 很 熟悉 。 如 果 你 是 一 名 Web 设 计 师 ， 很 可 能 天 天 
和 它 打交道 ， 却 没有 注意 到 它 的 存在 。 

你 还 可 以 使 用 jQuery 往 页 面 中 添加 或 从 中 删除 HTML， 并 响应 用 户 在 页 面 上 的 行为 ， 比 如 单 
击 一 个 链接 或 者 填写 一 张 表单 。 你 也 可 以 创建 动画 或 使 用 Ajax ， 通 过 Web 服 务 将 内 容 发 送 到 服务 
器 或 从 服务 器 载 入 内容， 而 根本 不 需要 刷新 页 面 。 

4. jQuery 的 优势 

今天 的 Web 站 点 已 经 不 再 仅仅 是 文本 、 图 片 和 到 其 他 页 面 的 一 个 个 链接 了 。 在 Facebook 、 谷 
aK. GR. HERP AM Foursquare ( 我 只 是 在 这 里 随便 说 上 几 个 ) 的 带动 下 ， 因 特 网 用 户 对 Web 站 点 
的 期 望 值 越 来 越 高 。 技 术 日 新 月 异 ， 而 使 用 jQuery 有 助 于 跟 上 这 快速 的 步伐 。jQuery 是 一 个 有 助 
于 快速 开发 Web 站 点 和 应 用 的 库 ， 它 让 我 们 把 精力 集中 到 用 户 交互 和 界面 设计 上 ， 并 且 无 需 编写 
TOBA ARES. 

因为 总 有 一 个 ( 合适 的 ) API 可 用 ， 写 起 jQuery 代码 来 远 比 写 原 生 JavaScript 容 易 。 如 果 你 熟 
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悉 HTML 和 和 CSS 编程， 就 很 容易 理解 和 编写 jQuery 代码 ， 因 为 绝 大 多 数 jQuery 功 能 都 是 在 HTML 


和 CSS 范 畴 内 (与 用 户 ) 交互 。 
eoo 


JavaScript 库 由 开源 社区 支持 , 并 得 到 了 良好 的 测试 和 及 时 更 新 。 开源 社区 是 一 个 巨大 的 支持 
网 络 。Web 设 计 师 和 开发 者 不 断 地 编写 解决 方案 、 写 书 、 写 插件 来 帮助 和 扩展 jQuery 库 。 


e 0000000 
目前 为 止 ,jQuery 最 大 的 优势 之 一 是 它 的 文档 
队 在 编写 有 关 库 如 何 工作 及 用 户 如 何方 便 地 查找 API 上 花费 了 大 量 时 间 。j 


可 以 说 正 是 它 造就 了 这 个 重大 的 库 。jQuery 


Query 文 档 站 点 上 有 


一 些 带 有 完整 代码 示例 的 解决 方案 , 还 有 遍布 整个 网 络 的 庞大 的 支持 团队 。 图 1-3 展 示 的 是 jQuery 


站 点 的 文档 子 站 。 


Main Page - jQuery JavaScript Library 
<)> | | Binto/docs.jquery.com/Main Page € | (Q» Google 


jQuery Plugins Ul Meetups Forum Blog About Dona 


ja uel Y Download Documentation Tutorials Bug Tracker Discussion 


te 


DOCUMENTATION sr TS © 


GETTING STARTED Main Page 
Main Page 
Downloading jQuery 
How jQuery Works 
SA GETTING STARTED JQUERY API REFERENCE 
Tutorials = Downloading jQuery 
Using jQuery with Other » How jQuery Works 
Libraries CEA QUE NONE 
ENE = Frequently Asked Questions 
= Tutorials 
API REFERENCE = Usin uery with Other Libraries 
jQuery Core » Variable Types 
Selectors 
Attributes PLUGINS 
Traversing 
Manipulation = Plugin Repository c 
= Plugin Authoring 


SUPPORT There are a number of alternative resources for 


browsing the API. 


图 1-3 jQuery 站 点 的 文档 子 站 
来 自 社 区 的 开发 者 和 程序 员 不 仅 发 明了 jQuery, 而 且 一 直 在 改进 jQuery， 


不 断 地 发 布 新 版 本 。 


自从 2006 年 发 布 1.0 版 本 以 来 , jQuery 代码 已 经 更 新 了 23 次 ， 目 前 最 新 的 版 本 是 1.4.2。 人 们 不 停 地 


改进 jQuery， 这 正 是 它 如 此 流行 的 一 大 原因 。 不 经 常 更 新 的 库 就 不 那么 流行 。 
由 于 库 不 断 更 新 ， 对 应 的 文档 也 就 不 断 更 新 ， 以 便 提 示 哪 些 方法 已 经 过 


(不 推荐 使 用 ,下 


一 次 发 布 时 有 可 能 被 删除 ) 并 确保 库 可 以 向 后 兼容 一 一 也 就 是 让 文档 也 适用 于 较 老 的 版 本 。 每 当 
发 布 一 个 新 版 本 ，( 用 户 的 ) 升级 过 程 相当 简单 一 一 把 新 版 本 的 JavaScript 库 往 服务 器 上 一 丢 就 行 
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了 。 当 然 ， 你 应 该 看 一 眼 更 新 日 志 ( 它 概述 每 次 发 布 的 版 本 及 库 的 改动 )， 以 查看 正 使 用 的 哪些 
方法 已 经 过 时 。 

jQuery 通过 MIT 许 可 证 或 GNU GPL v2 许可 证 发 布 。 基 本 的 意思 就 是 声明 它 是 自由 软件 , 只 要 
信任 jQuery 插件 的 作者 ， 就 可 以 自由 地 使 用 这 些 代码 。 

e [] [] [] JavaScript OOO00 

jQuery 就 是 JavaScript: MAE JavaScript FÍFA, ste jQuery T TA, -WRAAE RE 
喜欢 jQuery 的 一 点 是 , 它 提供 了 一 个 坚实 的 地 基 , 而 开发 者 叉 不 必 团 于 jQuery 提供 的 API。 在 使 用 
jQuery 编程 时 ， 有 3 种 选择 : 
口 选用 jQuery API; 

口 找 一 个 或 写 一 个 jQuery 插件 ; 
口 使 用 原生 JavaScript。 

jQuery 的 另 一 个 优势 是 代码 简洁 。 如 果 用 纯 JavaScript 改 变 (一 个 元 素 的 ) 背景 色 ， 代码 会 是 
这 样 : 

document .getElementById('mydiv').style.backgroundColor = 'red'; 

使 用 强大 的 选择 器 引擎 ，jQuery 达 成 同样 目的 的 代码 要 短 得 多 : 

$('#mydiv').css('background-color','red'); 

这 样 的 语法 比 原 生 语 法 更 容易 理解 ， 设 计 师 完 全 可 以 心里 怎么 想 ， 手 就 怎么 写 。 拿 jQuery 的 
语法 和 其 他 库 〈 比如 Prototype 或 YUI ) 的 语法 比 一 比 ， 你 就 会 明白 jQuery 为 什么 能 赢得 众多 Web 
设计 师 及 开发 高 手 的 心 jQuery 的 选择 器 引擎 是 它 最 著名 ,也 最 受 人 喜爱 的 功能 。 由 于 支持 用 CSS2 
选择 需 选 取 元 素 ， 对 于 那些 有 CSS 经 验 的 Web 设 计 师 来 说 上 手 极为 容易 。 

e 0000 

jQuery 的 另 一 个 厉害 功能 是 链 式 调 用 , 就 是 说 方法 可 以 一 个 接 一 个 ( 就 像 链条 那样 ) 地 调用 。 
这 非常 有 助 于 保持 代码 短小 ， 从 而 提高 从 Web 服 务 器 上 加 载 并 执行 jQuery 代码 的 性 能 。 

下 面 是 一 个 jQuery 链 式 调用 代码 示例 : 

$('#fo00') .addClass('active') .prev() .removeClass('active'); 

下 面 是 一 个 不 使 用 链 式 调用 的 代码 示例 : 


$('#fo0') .addClass('active'); 
$('tfoo').next().removeClass('.active'); 


看 看 这 两 个 例子 ,使 用 链 式 调用 编写 的 jQuery 代码 更 干净 、 更 简洁 。 本 书 中 的 代码 示例 大 都 
使 用 了 链 式 调用 。 

o 000000 

pÆ Safari, Firefox, IE, Google Chrome 和 Opera 的 不 断 更 新 ， EA LRA AY EL Ven 
便 成 了 重 中 之 重 。 浏 览 器 战争 已 经 成 为 每 一 位 Web 设 计 师 天 天 苦恼 的 问题 。 

如 果 使 用 的 是 jQuery， 你 尽 可 放心 ， 它 兼容 所 有 主流 浏览 器 ， 如 IE 6.0+、Mozilla Firefox 2+, 
Safari 3.0+、Opera 9.0+ 和 Google Chrome。 


10 第 1 章 认识 jQuery 


使 用 JavaScript 经 常会 遇 到 的 一 个 大 问题 是 , 你 不 得 不 编写 不 同 的 代码 以 支持 不 同 浏览 器 。 一 
些 Web 设 计 师 和 开发 者 选择 为 特定 浏览 器 编写 专用 样式 表 , 来 支持 不 同 浏览 器 ,一般 是 专门 为 IE 
写 一 个 , 为 其 他 浏览 右 写 一 个 。 JavaScript 也 有 类 似 问 题 。 下面 的 代码 展示 了 ( 使 用 原生 JavaScript ) 
如 何在 不 同 的 浏览 器 中 生成 Ajax 请 求 对 象 : 
if (window. XMLHttpRequest) { 
xhr = new XMLHttpRequest ();//®®Firefox/Safarin ny 
} else if (window. ActivexObject) { //Active X 有 版 本 


xhr = new ActiveXObject("Microsft.XMLHTTP"); // For IE 
} 


使 用 原生 JavaScript, 同样 的 功能 你 不 得 不 写 两 个 不 同 的 函数 , 测试 它们 , WET uh" OE 
bug )。 这 已 经 让 代码 难于 管理 ， 更 不 用 说 你 还 会 遇 到 这 样 的 情况 了 : 为 了 让 一 个 功能 支持 多 个 
浏览 器 ， 不 得 不 分 别 写 好 几 个 函数 。 有 一 个 方法 可 以 彻底 摆脱 这 个 痛 昔 ， 那 就 是 使 用 jQuery: 同 
样 的 功能 只 需要 写 一 次 ， 就 能 支持 所 有 的 浏览 器 。 

作为 对 比 ， 下 面 这 行 代码 展示 了 在 jQuery 中 发 起 一 个 Ajax 请 求 有 多 么 容易 。 

$.ajax(); 

e [] [] CSS3 

所 有 的 现代 浏览 器 都 支持 CSS1 和 CSS2 (CSS 的 前 两 个 版 本 )， 并 且 绝 大 多 数 Web 设 计 师 和 开 
发 者 现在 都 在 用 CSS2。CSS3 正 在 开发 当中 ， 它 提供 了 一 些 增 强 特性 ， 如 内 瞬 字 体 、 圆 角 、 高 级 
背景 图 片 功能 、 颜 色 、 文 本 特效 、 渐 变 等 。 现 在 只 有 少数 几 个 浏览 器 能 完全 支持 2010 年 7 月 发 布 
的 CSS3 标 准 ， 它 们 是 Firefox 4, IE 9, Opera 9 和 Safari 4。 这 些 浏览 器 的 一 些 老 版 本 对 CSS3 提 供 
部 分 支持 。 

jQuery 目前 只 支持 CSS3 标 准 中 的 新 选择 器 。 这 意味 着 什么 ”CSS3 的 新 功能 之 一 一 一 新 添加 的 
性 选择 器 ( 作为 对 CSS2 属 性 选择 器 的 补充 和 增强 ), 与 jQuery 中 已 有 的 属性 选择 器 非常 接近 。 这 
选择 器 让 你 能 够 基于 属性 对 内 容 添加 样式 , 这 样 就 能 过 滤 出 属性 中 特定 的 值 。 请 看 下 面 的 代码 : 


p[title-*foo] (background:black;color:white) 
«p class-"text" title-"food is good foo you">This is my sample text</p> 


e [] 00 [] JavaScript 

如 下 例 所 示 , 很 多 人 在 a 标 签 的 href 属 性 中 直接 能 入 JavaScript 代 码 以 创建 弹出 窗口 。 这 个 代 
码 最 大 的 问题 在 于 把 代码 直接 放 到 了 链接 href 属 性 当中 。 如 果 一 个 用 户 碰 巧 禁用 了 JavaScript( 虽 
然 这 确实 有 点 罕见 )， 这 个 链接 就 失效 了 ， 并 且 也 没有 退路 让 这 个 用 户 看 到 帮助 信息 。 


<a href-"javascript:window.open('help.html', 'help window', 
'height-800,width-2600,toolbar-no');return false; ">Help</a> 


这 是 突 匹 地 使 用 JavaScript 的 一 个 例子 。 对 Web 设 计 师 来 说 ， 这 就 像 在 编写 内 联 样式 ， 而 不 是 
将 样式 从 内 容 中 分 离 到 表现 层 。 为 了 和 这 个 突 天 使 用 JavaScript 的 例子 对 比 ， 下 面 是 一 个 使 用 
JavaScript, ABIL HIF, 它 使 用 了 jQuery, 代码 也 与 上 面 的 例子 相似 。 如 果 JavaScript 功 能 被 
禁用 ， 这 个 版 本 虽然 一 样 无 法 执行 封装 在 click 函 数 中 的 代码 ,但 提供 了 让 用 户 单 击 链 接 以 访问 
帮助 页 面 的 候补 方案 。 


(= M 
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<!doctype html» 
«html» 
«head» 
«title»Unobtrusive jQuery</title> 
«script type="text/javascript"> 
$(document).ready(function ()( 
$(".help-link").click(function() + 
var linkHref = $(this).attr('href'); 
window.open(linkHref,'help window', 'height=800,width=600,toolbar=no'); 
return false; 
1); 
1); 
«/script» 
«/head» 
«body» 
«a href-"help.html" class="help-link">Help</a> 
«/body» 
«/html» 


优雅 降级 和 渐进 增强 是 两 个 用 来 支持 浏览 器 新 特性 及 旧 浏览 器 的 两 个 ( 常用 ) 策略 ,可 用 于 
提供 最 佳 的 用 户 体 验 。 渐 进 增强 策略 比较 新 ,不 过 二 者 的 区 别 主要 在 于 采取 的 方式 不 同 。 接 下 来 
我 将 详细 介绍 这 两 个 策略 。 

e0000 

使 用 优雅 降级 方案 ，Web 站 点 在 所 有 新 式 流行 浏览 器 中 都 能 正常 工作 ， 如 果 用 户 使 用 的 是 老 
式 浏览 器 , 则 代码 会 检查 以 确认 它们 是 否 能 够 正常 工作 。 由 于 IE 独特 的 盒 模型 布局 问题 ， 绝 大 多 
数 Web 设 计 师 和 开发 者 都 通过 专门 的 样式 表 或 针对 不 同 版 本 的 正 的 hack 实 践 过 优雅 降级 了 OR, 


请 别 指责 IE6 )。 


<a href-"javascript:window.open('help.html', 'help window', 
"height=800,width=600, toolbar=no') ;">Help</a> 
<noscript> 


Please upgrade your browser or turn on JavaScript, as your browser is not working with 
our Website. 
</noscript> 


e J000 

渐进 增强 指 的 是 这 样 一 种 策略 : 从 被 所 有 浏览 器 支持 的 基本 功能 开始 , 逐步 地 添加 那些 只 有 
新 式 浏览 器 才 支 持 的 功能 。 渐 进 增强 是 值得 所 有 开发 者 采纳 的 做 法 , 能 让 Web 站 点 的 可 用 性 更 好 。 
如 果 你 总 是 交付 一 个 所 有 人 都 能 用 的 基本 功能 集 ， 加 上 只 支持 先进 浏览 器 的 专用 升级 版 功能 
比如 那些 采用 了 CSS3 和 HTML5 技 术 的 功能 集 ， 用 户 满意 度 会 更 高 。 目 前 仅 Safari 4 和 Opera 10.6 
支持 HTML5 和 CSS3。 

渐进 增强 方案 并 不 假定 所 有 有 户 都 支持 JavaScript, 而 总 是 提供 一 种 候补 方法 , 确保 用 户 可 以 
访问 (主要 的 ) 内 容 。 考 虑 一 下 “不 突 天 的 JavaScript” 那 节 中 的 弹出 窗口 ， 如 果 用 户 不 支持 
JavaScript， 我 们 就 通过 a 标 签 中 的 target 属 性 告诉 浏览 器 , 让 它 在 新 窗口 中 打开 这 个 链接 C 而 不 
再 使 用 弹出 窗口 )。 几 乎 所 有 的 浏览 器 都 支持 这 个 。 


<a href-"help.html" target="_blank">Help</a> 
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在 本 书 中 , 我 怪 力 于 使 用 渐进 增强 策略 让 使 用 现代 浏览 器 的 人 享有 较 好 的 用 户 体验 , 同时 为 
那些 使 用 老式 浏览 器 的 人 保证 基本 的 用 户 体验 。 

e [1|] O [] JavaScript[] jQuery 

因为 所 有 的 jQuery (JavaScript ) 代码 都 独立 于 HTML ( 存放 到 一 个 外 部 JavaScript 文 件 中 ) 或 
集中 存放 在 HTML 文件 的 头 部 区 域 ， 除 非 你 使 用 托管 在 CDN 上 的 jQuery 文件 〈 托管 解决 方案 ), 
所 以 jQuery 使 得 实践 这 些 策略 〈 优雅 降级 和 渐进 增强 ) 更 加 容易 。 由 于 HTML 元 素 中 不 可 入 任何 
JavaScript 代 码 ， 只 要 开发 者 牢记 这 些 实践 ， 在 架设 站 点 时 预 留 退 路 ( 非 JavaScript 方 案 ) 总 是 可 
行 的 。 
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jQuery AT] 


由 于 (各 种 库 中 ) jQuery 入 门 最 容易 ， 它 成 了 众多 设计 师 和 开发 者 的 选择 。 开 发 者 需要 下 载 
一 份 JavaScript 库 文件 的 副本 ， 并 使 用 一 个 script 标 签 将 它 包含 到 网 页 的 头 部 。 所 有 的 JavaScript 
库 都 一 样 ， 无 一 例外 : 必须 在 网 站 或 应 用 中 先 包 含 库 ， 然 后 才 可 以 使 用 库 的 特性 。 

本 章 会 指导 你 搭建 一 个 本 地 开发 环境 (可 选 的 )， 选 择 并 下 载 合 适 的 jQuery 库 文件 ， 然 后 将 
它 包含 到 站 点 当中 。 我 还 会 解释 jQuery 包装 需 的 用 途 。 


2.1 搭建 开发 环境 


搭建 开发 环境 的 第 一 步 是 选择 喜欢 的 编辑 器 。 有 很 多 流行 的 编辑 器 ,如 Dreamweaver、Coda、 
TextMate， 还 有 EditPlus 等 。 我 主要 使 用 Coda， 这 是 一 个 Mac OS X 应 用 程序 ， 是 供 设 计 师 和 开发 
者 开发 Web 站 点 和 应 用 的 专用 工具 。 这 个 软件 集成 了 很 多 实用 的 功能 , 包括 FTP、 终端 (命令 行 )、 
文件 管理 、CSS 及 代码 编辑 器 、 语 法 高 亮 、 自 动 完成 、 增 强 的 查找 和 替换 功能 、 预 览 及 多 语言 支 
持 。 如 果 不 喜 欢 使 用 代码 编辑 器 ， 你 也 可 以 用 Windows 上 的 记事 本 或 者 苹果 系统 上 的 TextEdit， 
只 是 这 样 就 不 能 使 用 代码 编辑 器 所 提供 的 丰富 特性 了 。 

在 开始 编写 jQuery 代码 之 前 ， 我 们 需要 有 个 地 方 测试 代码 ， 也 就 是 说 ， 我 们 需要 一 个 开发 环 
境 。 开 发 环境 可 以 是 一 个 本 地 环境 ( 包括 一 个 本 地 的 Web 服 务 器 和 Web 浏 览 器 ), 也 可 以 是 一 个 远 
程 Web 主 机 。 我 们 主要 使 用 它 在 一 个 仿真 的 环境 中 测试 代码 。 使 用 Coda 或 Dreamweaver 等 程序 的 
好 处 是 ， 这 些 软 件 本 身 支持 设置 外 部 Web 主 机 ， 这 样 我 们 就 能 直接 在 外 部 服务 器 上 工作 ， 轻 松 地 
进行 测试 。 

有 人 会 说 只 需要 一 个 本 地 文件 夹 就 能 干 活 ， 在 浏览 器 中 逐个 打开 文件 进行 测试 。 这 样 做 不 
是 不 行 ， 但 不 可 能 提供 真实 环境 那样 精确 的 预览 。 以 这 种 方式 开发 完 某 些 jQuery 功能 ， 也 许 等 
到 上 线 你 却 发 现 得 到 的 是 不 同 的 结果 。 我 坚信 自 开发 伊始 就 拥有 一 个 仿真 度 极 高 的 环境 ， 再 好 
不 过 了 。 

本 地 开发 环境 很 容易 搭建 ， 它 在 你 不 能 上 网 时 尤其 有 用 。 对 Mac 用 户 来 说 ， 搭 建 开 发 环境 最 
流行 的 选择 是 MAMP ( www.mamp.info/ ), 这 4 个 字母 代表 Mac/Apache/MySQL/PHP ( 参见 图 2-1 )。 
这 是 一 个 一 揽 子 解决 方案 ， 安 装 并 运行 它 可 以 在 本 地 进行 测试 ， 就 像 你 在 操作 一 台 真 正 的 Web 服 
务 器 一 样 。Windows 用 户 可 以 使 用 Wamp Server, ， 也 就 是 Windows/Apache/MySQL/PHP Server 
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( www.wampserver.com/en/ )。 我 建议 尽量 将 Apache 用 作 Web 服 务 器 , 它 是 一 个 非常 稳定 的 开源 Web 
服务 器 ， 主 要 运行 在 Linux 平 台 上 。 


@ Grab E ure n am ER . 026 = Se Q 
000 MAMP 
(QD Ce) CO Gf) (a. mp: /ocalhost:8888/MAMP/?language=English Wr) Mi cooor E 


Try MAMP PRO MAMP & MAMP PRO powered by appsolute GmbH 


MAMP 


(Q. , Welcome to MAMP = 
ue If you can see this page, MAMP is in} e. ; MAM P 
on your Mac and everything is worki manage your website locally 
Test MAMP PRO 
Status 
"e 
To see the PHP configuration, you can watch the output of phpinfo. @@ Apache Server 
- oe Meane Reines ) 
The MySQL Database can be administrated with phoMyAdmin. —_ 
To connect to the MySQL Server from your own scripts use the following connec 
parameters: 
Host localhost ————— — 
& MAMP PRO 1.8.4 released 
Port 8889 MAMP & MAMP PR 4 release: 
User root MAMP & MAMP PRO 1.8.3 released 
Password root News 
Example: First Moments with MAMP 
There is a great screencast by Chris Coyier on "First 
$link - mysql connect('localhost', 'root', 'root'); Moments with MAMP". Check it out! 


HowTo: Create a local environment using MAMP 
The team of drupal.org wrote a great step by step. 


or you can connect using an UNIX Socket: 


tutorial "Create a local environment using MAMP". Many 
Socket /Applications/MAMP/tmp/mysql/mysql.sock thanks! Check It outi 
User root 
New Online Documentation for MAMP & MAMP PRO 
区 Done Và Ysiow + j 


图 2-1 我 的 桌面 上 正在 运行 的 MAMP ( 另 见 彩 插图 2-1 ) 


对 Mac OS X 用 户 来 说 ， 也 可 以 使 用 系统 内 建 的 Apache Web 服 务 器 。 要 在 Mac 系 统 上 设置 
Apache 服 务 器 ， 需 要 以 下 步 又: 

(1) 打开 System Preferences( 系统 设置 ), 你 会 看 到 一 些小 图 标 , 单 击 这 些 图 标 可 以 设置 Personal 
(个 人 信息 )、Hardware ( 硬件 )、Internet and Wireless ( 因特网 和 无 线 网 ) 和 Other ( 其 他 项 )。 

(2) 单 击 Sharing( 共享 ) 图 标 打 开 Sharing( 共享 ) 面 板 , 然后 在 共享 服务 列表 中 选中 Web Sharing 
( Web 共 享 ) 选择 框 。Sharing 面 板 显 示 的 这 些 选 项 可 以 用 来 设置 文件 、 屏 幕 、 打 印 机 共享 等 。 如 
果 Web Sharing 选 择 框 已 经 选中 ， 就 跳 过 这 一 步 。 

(3) 如 图 2-2 所 示 ， 在 确保 Web Sharing 选 择 框 选中 之 后 ,我 们 现在 启动 Apache Web 服 务 器 。 你 
会 看 到 面板 的 右 侧 有 一 个 红色 状态 图 标 变 成 了 绿色 , 并 看 到 这 样 的 文本 : Your personal website, in 
the Sites folder in your home folder, is available at this address: http: //xx.xx.xx.xx/-yourname (你 的 个 
人 站 点 位 于 你 Home 目 录 的 Sites 子 目录 中 ， 并 可 以 通过 http://xx.xx.xx.Xx/~yourname 访 问 )。 

(4) 单 击 下 地 址 会 启动 默认 Web 浏 览 器 , 并 打开 默认 页 。 站 点 的 文件 (HTML CSS , JavaScript. 
Images ) 都 在 你 的 ~ /Sites 目 录 中 。 如 此 这 般 ， 一 个 Web 服 务 器 就 设置 好 了 。 我 所 有 的 本 地 开发 工 
作 都 是 用 这 种 方式 完成 的 。 
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4|» Show All Q 


Computer Name: Jake Rutter's MacBook 


Computers on your local network can access your computer at: jake- — (CEgit ) 
Rutters-MacBook.local VM 


Service @ Web Sharing: On 
] DVD or CD Sharing 


Os 


jers of other computers to view webpages on this 


JO 


Your personal website, in the Sites folder in your home folder, is available at 
this address: 
http://10.0.1.8/~jakerutter, 


DOOfSOCtE 


Your computer's website is available at this address: 
http://10.0.1.8, 


Internet Sharing 
Bluetooth Sharing 


Q]Qogot 


i] 
和 © 


图 2-2 Mac OS X 中 的 共享 设置 对 话 框 〈 另 见 彩 插图 2-2 ) 


在 Firefox 中 使 用 Firebug 扩 展 


如 果 尚 未 将 Firefox 用 作 主 要 的 开发 用 浏览 器 , 那么 在 进一步 学 习 本 书 内 容 之 前 , 我 强烈 建议 
你 下 载 并 安装 一 份 。 本 书 中 所 有 例子 用 的 都 是 Firefox 3.6.8 和 Firebug 1.5.4, 20064E12 H , Joe Hewitt 
发 布 了 他 编写 的 Firefox 扩 展 Firebug"， 如 今 它 已 是 一 个 开源 项 目 。 从 那 时 起 Firebug 不 断 升 级 ， 推 
陈 出 新 ， 现 在 已 经 有 100 多 万 开发 者 在 使 用 Firebug。 

Firebug 提 供 了 许多 小 工具 ， 是 广大 Web 设 计 师 和 开发 者 处 理 HTML、CSS 和 JavaScript 的 利 
器 。Firefox 不 但 免费 而 且 开源 ,任何 人 都 能 通过 Firefox 扩 展 网 站 ( addons.mozilla.org ) 下 载 并 使 
HIE. 

Firebug 不 但 查看 代码 方便 ， 还 支持 直接 在 页 面 上 修改 HTML 和 CSS 代 码 并 立即 查看 修改 结果 
(参见 图 2-3 )。 它 还 集成 了 一 个 非常 强大 的 JavaScript 调 试 器 ， 能 有 效 地 帮助 我 们 找 出 bug。Firebug 
空 制 台 有 一 个 非常 棒 的 功能 ， 我们 可 以 直接 在 控制 台 内 执行 JavaScript 脚 本 〈 当前 页 面 环 境 下 )， 
这 实在 方便 极 了 。 

1. 安装 与 启用 Firebug 

执行 以 下 步骤 ， 安 装 并 启用 Firebug。 

(1) 打开 Firefox 浏 览 需 ， 访 问 www.getFirebug.com。 

(2) 单 击 Install Firebug for Firefox ( 为 Firefox 安 装 Firebug ) 按钮 。 

(3) 接着 会 出 现 一 个 提示 窗口 ， 提 示 你 只 可 以 安装 值得 信任 的 扩展 ( 参见 图 2-4 )， 同 时 你 会 
看 到 Install ( 安装 ) 按钮 上 有 一 个 倒计时 的 数字 ， 当 这 个 数字 变 成 0 时 ，Install Now ( 现在 开始 安 
装 ) 按钮 就 可 以 单 击 了 。 此 时 请 单 击 它 。 


N 


CD 此 扩展 的 版 本 0.2 发 布 于 2006 年 1 月 12 日 ， 版 本 1.0 发 布 于 2007 年 1 月 24 日 。( 本 书 脚注 如 无 特殊 说 明 ， 均 为 译 者 注 。) 
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000 Firebug (=) 
(4) Ep)- GE) CX) Oft). Ge Chip: /getfirebug.com] 
|= riehug "E 
What is Firebug? ^ Resources Community Get Involved 
Introduction and Features Documentation wiki, FAQ, and Discussion forums and lists Hack the code, create plugins 
other Firebug tore 
ee. Fireb us Install Firebug For Firefox 
100% free and Open source 
Web Development Evolved. Other Versions Firebug Lite Extensions 


Screencast Introduction to Firebug 


The most popular and powerful web development tool 
Chief Firebug pyroentomologist Rob Campbell gives 


Sf Inspect HTML and modify style and layout in real-time a quick introduction to Firebug. 

@ Use the most advanced JavaScript debugger available for any browser ‘watch nos 

$Ê Accurately analyze network usage and performance Other Firebug screencasts 

@ Extend Firebug and add features to make Firebug even more powerful © Check back for more Firebug screencasts, coming 


4f Get the information you need to get it done with Firebug. — 


More Features » 


A Inspect i Log e Profile 


Pinpoint an element in a webpage Send messages to the console direct Measure your Javascript 
with ease and precision. from your webpage through performance in the Console's 
Javascript. Profiler. 
© Debug I] Analyze «^» Layout 
Step-by-step interactive debugging Look at detailed measurements of Tweak and position HTML elements 
in a visual environment. your site's network activity. with CSS and the Layout panels. 


图 2-3 Firebug È Jy Rih 


Install add-ons only from authors whom you trust. 


Malicious software can damage your computer or violate your privacy. 


You have asked to install the following item: 


x Firebug (Author not verified) 
https://addons.mozilla.org /en-US/firefox/downloads /latest/1843?src-e» 


( Cancel ) ( Install (5) / 


图 2-4 Firebug 安 装 提示 


(4) 接着 你 会 看 见 一 个 安装 进度 条 ， 表 示 插 件 正在 安装 到 浏览 器 上 。 等 插件 安装 完毕 ， 你 会 
看 到 一 条 确认 消息 和 一 个 Restart Firefox ( 重启 Firefox ) 按钮 (参见 图 2-5 )。 
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日 日 日 Add-ons 


Get Add-ons Extensions Themes | Plugins 


Firebug 1.5.4 
Restart to complete the installation. 


图 2-5 Firebug 安 装 结束 窗口 


(5) 祝贺 你 ，Firebug 已 经 安装 好 ， 可 以 使 用 了 1! 图 2-6 展 示 的 是 安装 过 程 的 最 后 一 步 。 


000 Add-ons 


[.Get Add-ons MEOE Themes | Plugins | 


^ Firebug 1.5.4 
Web Development Evolved. 


[::| GridFox 2.0 

Displays a grid on top of a website. 
JavaScript Debugger 0.9.87.4 
JavaScript debugger and profiler 


m JavaScript Deobfuscator 1.5.5 


Shows you what JavaScript code gets to run on webpages 


[JN Measurelt 0.4 


Draw out a ruler to get the pixel width and height of any elements on a webpage 


Mozbar 0.51 
A toolbar for the users of SEOmoz.org, Inc. a 


Find Updates 


Al2-6 ”Firebug 安 装 完成 并 重启 浏览 器 之 后 的 Firebug 安 装 确认 提示 


2. 启用 Firebug 

执行 以 下 步 台 ， 启 用 Firebug。 

(1) 在 Firefox 中 打开 一 个 页 面 。 出 于 演示 目的 ， 我 打开 了 www.mozilla.com 页 面 。 

(2) 等 页 面 加 载 完 毕 之 后 ， 有 好 几 种 方法 打开 Firebug。 最 容易 的 方式 是 单 击 位 于 浏览 器 右 下 
角 " 的 Firebug 图 标 。 图 2-7 演 示 了 一 个 安装 好 了 的 Firebug 例 子 ， 你 会 看 到 浏览 器 右 下 角 有 一 个 
Firebug 图 标 。 


CD 最 新 浏览 器 和 最 新 Firebug 很 可 能 改变 了 这 个 位 置 ， 如 果 你 在 浏览 器 右 下 角 看 不 到 Firebug 图 标 (一 个 小 放火 
别 犹 殉 ， 按 F12 键 一 样 能 激活 Firebug。 


yu 
— 
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jQuery AT] 


@ Grab File Edit Capture Window Help qm EES toes 5 n. m 
Firebug 
4)»)- (& f&) Cut nttp://getfirebug.com/ j 
| Firebug rz 
What is Firebug? ^ Resources Community Get Involved 


ra 


The most popular and powerful web development tool 


€ 
e 
€ 
€ 
Ld 


Introduction and Features Documentation wiki, FAQ, and 


other Firebug lore 


Firebug 


Web Development Evolved. 


Inspect HTML and modify style and layout in real-time 
Use the most advanced JavaScript debugger available for any browser 
Accurately analyze network usage and performance 

Extend Firebug and add features to make Firebug even more powerful 
Get the information you need to get it done with Firebug. 


Discussion forums and lists Hack the code, create plugins 


Other Versions 


Firebug Lite 


Extensions 


Screencast Introduction to Firebug 


Chief Firebug pyroentomologist Rob Campbell gives 
a quick introduction to Firebug. 
Watch now 


Other Firebug screencasts 
© Check back for more Firebug screencasts, coming 
soon. 


More Features » 


Inspect 


Pinpoint an element in a webpage 
with ease and precision. 


E Log 


Javascript. 


Debug 


Step-by-step interactive debugging 
ina visual environment. 


Analyze 


Recent news 


Ku Done 


Send messages to the console direct 
from your webpage through 


Look at detailed measurements of 
your site's network activity. 


Q Profile 


Measure your Javascript 
performance in the Console's 
Profiler. 


Layout 


‘Tweak and position HTML elements 
with CSS and the Layout panels. 


Links and Elsewhere 


E Ysiow 


你 也 可 以 在 浏览 需 窗 


图 2-7 
口中 单 击 鼠标 右键 ，4 


一 个 网 页 (Firebug 


vy 


图 2-8 演 示 了 一 个 浏览 器 窗口 中 弹出 的 菜单 。 


_ @ Firefox 
eoe 


File 


Edit View History Bookmarks Tools Window Help 


jQuery: The Write Less, Do More, JavaScript Library 


已 安装 好 ) Firebug 图 标 


类 后 在 弹出 菜单 中 选中 Inspect Element 检视 元 素 )。 


co Œ 


ODON J GA) CI ( hup: /iquery.com/ 


图 jQuerv: The Write Less. Do More. I... 


Back 


Reload 


JQuery Plugins UI 


Download Documentation 


Bookmark This Page 

Save Page As... 

Save Image of Visible Portion... 
Save Image of Entire Page... 


Send Link... 


Open SQL Inject Me Sidebar 
Open XSS Me Sidebar 
View Background Image 


Select All 


View Source Chart 
View Page Source 


þScript Library that simplifies HTML 
dling, animating, and Ajax interactions for 
is designed to change the way that you 


View Page Info 


GridFox 


Web Developer 


inspect Element 


WHO'S USING JQUERY? 


LEARN JQUERY NOW! 


What does jQuery code look like? Here's the 
quick and dirty: 


JQUERY RESOURCES 


Getting Started With jQuery 


+ How j Works 


$("p-neat")-addclass("ohmy").show( "slow" ); 


+ Tutorials 


Google 


Meetups Forum Blog About Donate 


Tutorials Bug Tracker Discussion 


GRAB THE LATEST VERSION! 
CHOOSE YOUR COMPRESSION LEVEL: 


PRODUCTION (24KB, Minified and Gzipped) 
DEVELOPMENT (155KB, Uncompressed Code) 


* 


jquery 


Current Release: 


Developer Resources 
+ Mailing List 
+ Source code / SVN 


图 2-8 


通过 Inspect Element 打 开 Firebug 
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(3) 打开 Firebug 之 后 ， 你 会 看 到 一 排 标签 : Console ( 控制 台 )、HTML CSS, 、Script， 还 有 
DOM 等 。 

3. 检视 与 编辑 HTML 

Firebug 的 检视 和 编辑 功能 实在 太 强 大 了 ， 尤 其 是 DOM 的 即 改 即 现 功 能 ， 这 让 HTML 和 
JavaScript 调 试 工作 变 得 简单 很 多 。 如 果 你 的 脚本 添加 或 修改 了 一 段 HTML, 打开 检视 窗口 SUBE 
清楚 地 看 到 HTML 改 变 的 “直播 过 程 ”。 当 我 需要 调试 JavaScript 时 ， 第 一 步 总 是 打开 检视 窗口 ， 
先 确 认 即 将 操作 的 HTML 已 创建 好 。 图 2-9 演 示 的 是 一 个 打开 了 的 Firebug 窗 口 ， 其 中 选中 了 bodqy 
标签 。 


jQuery: The Write Less, Do More, JavaScript Library 


CR UG f CIS http: //iquery.coms Buc Q) tee 


] [Bl jquery: The write Less, Do More, J. T+ 


jQuery Plugins Ul Meetups Forum Blog About Donate 


j Q ue I Y Download Documentation Tutorials Bug Tracker Discussion 


GRAB THE LATEST VERSION! 


jQuery is a fast and concise JavaScript Library that simplifies HTML CHOOSE YOUR COMPRESSION LEVEL: 
document traversing, event handling, animating, and Ajax interactions for PRODUCTION (24KB, Minified and Gzipped) 
rapid web development. jQuery is designed to change the way that you DEVELOPMENT (155KB, Uncompressed Code) 


write JavaScript. 


RE Console HTML~ | CSS Script DOM Net PageSpeed Page Speed Activity — YSlow 990 
&$ : Edit : body.jq-enhanced < htmljs Style» | Computed Layout DOM 
V <html class-"js" xmlns-"http://www.v3. 0rg/1999/xhtml" xml:lang="en"> body { screen.css (line 8) 
> <head> background: url("../images/bg-home-tile. jpg") repeat-x scroll 
"ZIE 50% @ 4394144; 
<div id-"jq-siteContain"» color: #FFFFFF; 


font: 62.5% "Trebuchet MS" ,Verdana,Helvetica,Arial, sans-serif 
Himportant ; 
margin: 0; 
padding: 0; 


V <div id-"jq-header"» 
b <a id-"jq-sitelogo" title-"jQuery 
Home" href-"http://jquery.com"» 


> «div id="jq-primaryNavigation"> n 
> «div id-"jg-secondaryNavigation"» body { reset.css (line 21) 
y . 
Nod o. ] S f line-height: 1; 
<div id-"jq-content” closs-"jq-clearfix"» n 
«div id-"jq-footer" class-"jq-clearfix"» hii; body; div; spon, epplst, object, reset.css (line 4) 全 
</div> Vile. bd， ju b2 L4 bE RC a 1 


[ Done là vsow 0.9135 党 


> 


图 2-9 ”Firebug 的 HTML 编 辑 区 域 


4. 使 用 控制 台 

调试 JavaScript 的 第 二 步 是 使 用 Firebug 控 制 台 。 我 在 修复 了 DOM 问 题 之 后 ， 接 着 就 用 控制 台 
来 测试 我 的 脚本 ( 在 这 个 页 面 上 )。 你 会 看 到 控制 台 分 两 个 区 域 ， 其 中 左边 的 区 域 用 来 显示 错误 
言 息 ， 而 右边 的 区 域 用 来 输入 JavaScript 指 令 。™ 


CD 如 果 Firebug 刚 刚 安装 好 ， 单 击 Console 标 签 ， 你 看 到 的 应 该 是 上 下 两 个 区 域 。 上 面 比 较 大 的 区 域 显 示 控制 台 信息 ， 
下 面 很 窗 的 区 域 ( 只 有 一 行 ) 用 来 输入 JavaScript 语 句 ， 这 个 区 域 一 次 只 能 输入 一 行 代码 ， 且 其 右 侧 有 一 个 圆 形 按 
钮 ， 按 钮 上 有 一 个 上 箭头 。 这 个 按钮 用 来 激活 多 行 测试 区 ， 单 击 这 个 按钮 ， 上 下 两 个 区 域 就 变 成 作者 所 说 的 左右 
两 个 区 域 了 。 


NS 
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(1) 打开 Firebug， 单 击 Console 标 签 。 
(2) 如 果 页 面 上 的 脚本 有 错 ， 它 们 会 显示 在 左边 的 区 域 。 图 2-10 展 示 了 Console 的 两 个 区 域 ， 
以 及 显示 在 左边 区 域 中 的 错误 信息 。 


Chapter 2 - While Loop 


(4) >)- (CQ) ( ) (te) CL) C http://10.0.1.8/~jakerutter/javascript/chapter2-while-loop.htm| wr) Gh gle Q) fs 


] DL Chapter 2 - While Loop. r * = 


This is the 0 statement 
This is the 1 statement 
This is the 2 statement 
This is the 3 statement 
This is the 4 statement 
This is the 5 statement 


This is the 6 statement 

cE 2 
Èr Consoley HTML CSS Script DOM Net PageSpeed Page Speed Activity — YSlow eco 
l : Clear Persist Profile var numStatement = 5; 


>>> var numSt nt = 5; document.write(numStatements); ic 
© ReferenceError numStatements is not defined { message="numStatements is not 


defined", more... } 


Run Clear Copy e 
# Wa ^ 0.2K 0.1895 


图 2-10 ”Firebug 控 制 台 及 其 中 显示 的 错误 信息 


5. 在 Firebug 控 制 台 中 测试 JavaScript 脚 本 

使 用 Firebug 控 制 台 ， 我 们 无 须 将 脚本 加 载 到 页 面 ， 就 能 直接 在 Web 服 务 器 上 进行 测试 。 这 实 
在 是 一 种 了 不 起 的 JavaScript 调 试 方法 。 如 果 JavaScript 代 码 运 行 出 错 ，Firebug 控 制 台 会 及 时 给 出 
错误 信息 。 在 把 脚本 写 入 HTML 文 件 之 前 能 以 这 种 方式 对 脚本 进行 充分 测试 ， 这 实在 太 棒 了 。 

6. 使 用 Firebug 进 行 高 级 JavaScript 调 试 

要 调试 那些 更 复杂 的 JavaScript 应 用 程序 ，Firebug 有 专门 的 JavaScript 调 试 嚣 。 这 个 调试 器 功 
能 强大 ,支持 在 脚本 的 不 同位 置 添 加 断 点 ， 这样 就 可 以 通过 暂停 、 停 止 、 继 续 执行 脚本 仔细 观察 
变量 和 对 象 。 这 个 调试 需 是 专 为 高 级 JavaScript 程 序 员 准 备 的 ， 因 此 在 本 书 中 我 不 会 详细 介绍 它 。 

7. 在 其 他 浏览 器 中 调试 JavaScript 

地 球 上 并 非 只 有 Firefox 浏 览 器 提供 了 Web 开 发 工具 。 蔷 果 公司 的 Safari 、 谷 歌 公 司 的 Chrome 
以 及 (新 版 的 )IE 都 提供 了 类 似 的 工具 , 但 是 它们 中 任何 一 个 都 无 法 与 Firefox 的 Firebug 插 件 相 比 。 
Safari/Chrome 调 试 器 提供 了 一 些 与 Firebug 类 似 的 功能 , 包括 元 素 检视 功能 和 资源 管理 标签 , 但 是 
它们 缺少 一 个 像 Firebug 包 含 的 那样 强大 的 JavaScript 调 试 器 。 其 他 Web 开 发 工具 我 用 得 不 多 。 我 偶 
尔 使 用 IE/Safari ( 开发 工具 ) 检查 页 面 ， 而 Firebug 一 直 是 我 Web 开 发 工作 最 主要 的 帮手 。 
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在 学 习 jQuery 和 其 他 JavaScript 库 之 前 ， 作 为 Web 设 计 师 或 开发 者 的 我 们 需要 熟悉 JavaScript 
的 基本 概念 。 也 就 是 说 , 没有 坚实 的 JavaScript 基 础 ,我 们 只 能 使 用 和 写 一 些 简单 的 脚本 ,而 深入 
了 解 javaScript 工 作 原 理 却 能 够 大 大 提高 开发 效率 ， 增 加 对 JavaScript 这 门 语言 的 理解 ， 有 效 提高 
生产 率 。 


2.2 TR jQuery 库 


在 开始 jQuery 开发 之 前 , 我 们 首先 要 去 jQuery 站 点 下 载 jQuery 库 。 jQuery 库 就 是 一 个 JavaScript 
文件 ， 可 以 用 两 种 方法 访问 : 

(1) 下 载 jQueryjs 并 将 它 部 署 到 你 的 Web 站 点 ; 

(2) 使 用 存放 在 CDN ( 内 容 分 发 网 络 ) 上 的 某 个 托管 版 本 。 

我 建议 你 下 载 一 份 jQuery 副 本 ， 并 将 它 部 署 到 自己 的 计算 机 上 ， 用 于 开发 和 测试 。 在 没有 
特 网 连接 的 时 候 ， 这 么 做 尤其 有 用 。 执 行 以 下 步骤 下 载 jQuery: 

(1) 在 浏览 器 中 打开 jQuery 官方 网 站 wwwjquery.com。 

(2) 单 击 页 面 顶 部 主导 航 中 的 Download ( 下载 ) 链接 ， 它 会 把 你 带 到 一 个 页 面 ， 这 个 页 面 提 
供 了 许多 种 访问 jQuery 库 的 方式 。 图 2-11 即 jQuery 下 载 页 。 


Downloading jQuery - jQuery JavaScript Library 


(4 jt - (8) (X) Gf) ( 图 http://docs.jquery.com/Downloading jQuery wv) 总 对 Good Q 


! mw I 
图 Downloading jQuery - jQuery Jav... | + = 


jQuery Plugins Ul Meetups Forum Blog About Donate 


j Q U el Y Download Documentation Tutorials Bug Tracker Discussion 


DOCUMENTATION sory Se 


GETTING STARTED Downloading jQuery 
Main Page 
Downloading jQuery 
How jQuery Works CONTENTS 
no 1 About The Code 
TUUM 2 CDN Hosted jQuery 
Using jQuery with Other 
Libraries 3 Download jQuery 
Variable Types 3.1 Current Release 
3.2 Past Releases 
API REFERENCE 4 Nightly Builds 
jQuery Core 5 Git 
Selectors 5.1 Build Requirements 
5.1.1 If you're using make: 
5.1.2 If you're using ant: 


Attributes 
Traversing 
Manipulation 
CSS. 


图 2-11 jQuery 官方 网 站 下 载 页 
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很 多 网 站 使 用 免费 的 CDN 服 务 ， 因 为 这 些 CDN 服 务 已 经 被 证 明 既 可 靠 又 快速 ， 能 节省 站 点 
消耗 的 带宽 。CDN (Content Delivery Network， 内 容 分 发 网 络 )， 是 由 一 些 网 络 公司 巨 头 CA 
歌 、 微 软 、Akamai 等 ) 提供 的 内 容 分 发 方案 。 


CDN 网 络 不 但 速度 


ER, 而且 几乎 没有 流量 限制 ,它们 在 很 多 点 上 都 部 署 有 jQuery 库 。 当 一 个 


用 户 通过 浏览 器 访问 你 的 站 点 时 , CDN 能 根据 该 用 户 的 IP 地 址 选择 离 他 最 近 的 服务 器 分 发 jQuery 
库 给 他 ， 这 会 有 效 降 低 页 面 载 人 时 间 。 图 2-12 展 示 的 是 托管 在 谷歌 CDN 上 的 Ajax 库 列表 页 ， 这 个 
页 面 介绍 了 很 多 包含 jQuery 或 其 他 库 到 站 点 (或 应 用 程序 ) 的 选项 。 


Google Libraries API - Developer's Guide - Google Libraries API - Google Code 


(4 > CQ) (X) Of). CH Lhttp://code.google.com/apis /libraries /devguide.html#jquery iiv) Cae google jquery hosted Q) & + 
] #4 Google Libraries API - Developer’. [FT = 
Ext Core 


如 果 使 用 托管 方案 
jQuery， 可 参考 下 面 这 行 


name: ext-core 

latest version: 3.1.0 (view older versions) 

load request: google. load("ext-core, 3.1.0"); 

extras: uncompressed: true (as in google. load("ext-core", "3.1.0", {uncompressed:true}); 
path: http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js 

path(u): http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core-debug.js 

site: http://extis.com/products/extcore/ 


jQuery 


name: jquery 

latest version: 1.4.2 (view older versions) 

load request: googl1e.load("jquery, 1.4.2"); 

extras: uncompressed:true (as in google.load("jquery", "1.4.2", (uncompressed:true)); 
path: http://ajax.googleapis.com/ajax/libs/jquery/1 .4.2/jquery.min.js 

path(u): http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/query.js 

site: http://iquery.com/ 

note: 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild... 


jQuery UI 


name: jqueryui 

latest version: 1.8.2 (view older versions) 

load request: google.load("jqueryui, 1.8.2"); 

extras: uncompressed:true (as in google.load("jqueryui", "1.8.2", (uncompressed:true)); 
path: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js. 

path(u): http://ajax.googleapis.com/ajax/libs/jqueryui/1 .8.2/query-ui.js 

site: http://iquery.com/ 

note: This library depends on jquery. You must also load jquery before loading this module. 


MooTools 


name: mootools 
latest version: 1.2.4 (view older versions) 


图 2-12 ”托管 在 谷歌 CDN 上 的 Ajax 库 列 表 页 


， 你 可 以 在 URL 中 指定 要 使 用 的 jQuery 版 本 。 要 使 用 托管 在 谷歌 上 的 托管 
代码 : 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 


</script> 


谷歌 和 微软 都 是 有 着 巨大 市 场 份额 的 大 公司 ,已 经 有 许多 站 点 在 使 用 托管 在 它们 服务 器 上 
eR ed AEN Ue 你 在 初次 访问 一 个 站 点 时 ， 该 站 点 用 到 的 托管 库 文件 已 
经 缓存 在 你 的 浏览 器 中 的 可 能 性 就 越 大 。( 当 你 访问 一 个 网 站 时 , 浏览 器 会 缓存 从 服务 器 上 获取 


的 文件 。) 


举例 来 说 ， 我 每 天 都 用 Digg ( www.digg.com )，Digg 是 一 个 新 闻 门 户 站 点 ， 它 根据 用 户 投票 
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多 寡 显 示 新 闻 。 这 个 站 点 使 用 的 是 托管 在 谷歌 服务 器 上 的 jQuery 库 ， 因 此 我 决定 把 jQuery 库 加 到 
我 自己 的 站 点 上 。 在 我 访问 自己 的 站 点 时 ， 请 求 jQuery 库 时 浏览 器 会 从 浏览 器 缓存 中 获取 一 个 已 
缓存 的 版 本 ， 除 非 从 谷歌 那里 得 到 了 一 个 库 已 经 被 修改 过 的 响应 。 如 果 是 那样 ,浏览 器 就 放弃 组 
存 中 的 版 本 ， 而 去 谷歌 服务 器 获取 最 新 版 本 。 

表 2-1 是 两 种 jQuery 库 对 比 表 。 


表 2-1 jQuery 库 版 本 


格 x fa xk 
未 压缩 版 本 ( 大 约 155KB ) 主要 用 于 开发 过 程 ， 方便 调试 ， 也 方便 高 级 程序 员 随 时 看 看 jQuery 
的 某 个 功能 是 怎么 实现 的 
压缩 版 本 (大约 55 KB" ) 体积 非常 小 , 用 于 生产 环境 。 采 用 压缩 技术 去 除了 所 有 不 必要 的 字 


符 ， 如 注释 、 换 行 符 、 不 必要 的 空格 和 制 表 符 以 缩短 载 和 时间 
* 这 里 列 出 的 文件 大 小 对 应 的 是 1.4.2 版 本 的 jQuery。 


一 些 老练 的 用 户 可 能 希望 通过 Git ( 一 种 版 本 控制 软件 ) 获取 最 新 版 本 的 jQuery 库 。 在 这 本 书 
里 我 不 会 详细 介绍 Git， 如 果 你 想 深入 了 解 Git， 不 妨 访问 www.git.com。 
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做 出 决定 以 后 (或 是 下 载 一 份 jQuery 库 , 或 是 使 用 托管 版 本 的 某 个 jQuery 库 ), 我 们 都 需要 在 
页 面 中 包含 它 。 我 们 可 以 使 用 <script> 标 签 将 jQuery 库 包 含 到 HIML 页 头 的 <heaq></head> 标 签 
之 间 ， 也 可 以 将 jQuery 库 包 含 到 刚好 在 </podqy> 标 签 之 前 。 

我 们 必须 在 包含 jQuery 库 和 自己 编写 的 jQuery 代码 之 前 先 包含 CSS ( 层 铸 样式 表 )， 只 有 这 样 
才能 确保 在 jQuery 修改 DOM 之 前 所 有 CSS 已 经 应 用 到 DOM (Document Object Model， 文 档 对 象 
模型 )。 

在 网 页 的 HTML 的 开头 应 该 包含 一 份 正确 的 doctype 定 义 。 没 有 doctype 的 页 面 在 浏览 器 中 
可 能 会 有 各 种 不 确定 的 怪异 行为 ,也 会 使 页 面 无 法 通过 代码 验证 检查 。 合 适 的 doctype 有 助 于 代 
码 在 不 同 的 浏览 器 中 表现 一 致 。 在 缺少 doctype 的 页 面 中 ,jQuery 有 可 能 出 现 泻 染 错 误 ，CSS 也 
一 样 会 演 染 出 错 。 

本 书 中 所 有 的 例子 都 使 用 HTML5 doctype 以 确保 在 较 老 的 浏览 器 中 实现 渐进 增强 和 优雅 降 
级 (如果 你 忘 了 什么 是 渐进 增强 和 优雅 降级 ， 请 阅读 第 1 章 )。 与 早期 那些 很 难 记忆 的 doctype 相 
比 ，HTML5 doctype 设 置 起 来 非常 简单 。 

下 面 的 代码 就 是 HTML5 doctype: 

<!DOCTYPE html» 

下 面 是 一 个 非常 简单 的 HTMIL 文档 ， 这 个 文档 告诉 我 们 如 何 把 jQuery 包含 到 页 面 的 头 部 。 记 
着 总 是 先 包含 所 有 CSS 文 件 ， 这 样 才 能 确保 在 修改 DOM 之 前 页 面 已 经 被 正确 泻 染 。 
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<!DOCTYPE html» 
«html» 
«head» 
<title>My jQuery Example</title> 
<link href="css/global.css"/> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
/ | Wig 
«/script» 
«/head» 
«body» 
«/body» 
</html> 


男 一 种 方式 是 把 jQuery 库 包 含 到 页 尾 。 把 库 包 含 到 页 尾 会 在 某 种 程度 上 提高 页 面 加 载 速 度 ， 


是 因为 JavaScript 不 会 阻塞 页 面 其 他 部 分 的 加 载 ( 在 页 头 加 载 脚本 会 阻塞 页 面 的 泻 染 )。 男 外 ， 
样 也 能 确保 在 JavaScript 起 作用 之 前 DOM 已 经 加 载 完 。 
<html> 
<head> 


<title>My jQuery Example</title> 
<link href="css/global.css"/> 
</head> 
<body> 
<hi>Hello jQuery!</h1> 
<div id="page-container"> 
<p>You can place your jQuery at the end of the page too!</p> 
</div> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
// 脚 本 
</script> 
</body> 
</html> 


如 果 要 在 页 面 上 包含 托管 在 谷歌 CDN 上 的 jQuery, 就 一 定 不 能 使 用 相对 路 径 , 而 是 要 使 用 谷 
提供 的 绝对 路 径 : 


«html» 
«head» 
<title>My jQuery Example</title> 
<link href="css/global.css"/> 
<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
type="text/javascript"></script> 
<script type="text/javascript"> 
// 脚 本 
</script> 
</head> 
<body> 
</body> 
</html> 


T 
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2.4 理解 jQuery 包装 器 


在 开始 jQuery 编程 之 前 ， 我 们 有 必要 摘 清 楚 jQuery 包 闭 需 是 怎么 回 事 ， 以 及 它 如 何 作用 于 
DOM。 在 大 多 数 编程 语言 里 ， 包 装 需 包装 某 个 东西 (通常 是 一 个 对 象 ) 以 扩展 其 功能 。 本 质 上 
jQuery 包装 器 使 用 选择 器 将 自身 附加 到 DOM 上 ， 从 而 达到 扩展 DOM 的 目的 。 实 际 上 jQuery 并 没 
有 提供 什么 新 方法 , 它 只 是 使 用 原生 JavaScript 方 法 作为 “ 米 ”， 做 出 了 极为 美味 (极其 易 用 ) 的 
H KE”. 

与 原生 JavaScript 相 比 ,， jQuery 包装 器 的 威力 在 于 只 需要 极 少 的 代码 就 能 实现 同样 的 功能 。 下 
面 是 一 个 jQuery 选择 器 语句 示例 : 

$ (selector) 

jQuery 提供 了 许多 事件 方法 ，document . ready () 事 件 处 理 方法 是 其 中 最 重要 的 一 个 ， 它 只 
在 DOM 完 全 加 载 之 后 触发 。( 在 JavaScript 语 言 中 ) 方法 仅仅 是 函数 的 另 一 种 表达 方式 。 而 在 其 他 
面向 对 象 编程 语言 中 ， 方 法 比 函 数 更 强大 。jQuery 最 强大 之 处 在 于 操作 DOM， 因 此 在 对 DOM 做 
任何 操作 之 前 ， 我 们 必须 确保 DOM 已 经 准备 好 。 

应 该 把 所 有 jQuery 代码 都 放 到 aocument . ready () 事件 处 理 函 数 当 中 ， 这 样 就 能 保证 它们 在 
DOM 准 备 好 之 后 才 开 始 执行 。 这 个 事件 类 似 于 JavaScript 原 生 的 onLoad 事 件 ， 不 过 
document . ready () 仅 在 DOM 完 全 准备 好 之 后 触发 。 

以 下 示例 代码 以 HTML 内 概 脚 本 的 方式 ， 演 示 了 如 何 使 用 document . ready () 方 法 : 


«html» 
«head» 
<title>My jQuery Example</title> 
«script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
type="text/javascript"></script> 
<script type="text/javascript"></> 
$ (document) .ready(function() { 
// 肢 
333 
«/script» 
«/head» 
«body» 
«/body» 

«/html» 


每 个 开发 者 都 应 该 养 成 使 用 document . ready () 方 法 的 习惯 ， 并 把 自己 编写 的 jQuery 代码 存 
放 到 单独 的 脚本 文件 当中 。 这 是 我 推荐 的 工作 方式 ， 有 助 于 将 脚本 代码 与 HTML 代 码 分 离 。 我 习 
惯 把 自己 的 jQuery 代码 保存 到 jquery.function.js 当 中 ， 并 把 它 最 后 一 个 包含 到 页 面 当 中 (在 所 有 
jQuery 核心 库 文件 之 后 )。 

document .ready () 有 一 种 简写 形式 ， 如 果 你 想 少 打 几 个 字 "”, 或 者 提高 移动 应 用 符 的 性 能 ， 


(D 省 这 么 几 个 字符 显然 是 无 法 显著 提高 性 能 的 ， 不 过 能 玫 程 序 员 省 点 打字 时 间 是 真 的 。 作 者 在 这 里 这 么 讲 是 和 大 家 
开 个 玩笑 。 
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不 妨 使 用 这 种 形式 。 下 面 是 使 用 简写 版 本 的 例子 : 


«html» 
«head» 
<title>My jQuery Example</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
type="text/javascript"></script> 
<script type="text/javascript"></> 
$(function() { 
// 脚 本 
} 
</script> 
</head> 
<body> 
</body> 

</html> 


要 想 解释 清楚 jQuery 包装 需 ， 我 需要 先 解释 清楚 aocument.readqy () 语 句 都 会 干 些 什么 。 首 
先 说 说 美元 符号 ($ )， 大 家 知道 它 是 jQuery 的 别名 ， 紧 随 其 后 的 是 选择 器 参数 。 选 择 器 需要 用 一 
对 括号 括 起 来 。 在 下 面 的 例子 中 ,我 传人 qocument 对 象 作为 DOM 选 择 器 。jQuery 别 名 ($ ) 及 其 
选择 带 参 数 构成 了 jQuery 包装 器 。 

$ (document) 

在 选择 器 表达 式 之 后 不 光 可 以 绑 定 readqy 事 件 ， 也 可 以 绑 定 其 他 事件 。 

. ready () 

XE function RAPES, HEARED EDOMMRI RE SF ( 这 时 图 片 
尚未 加 载 完 毕 ) 后 执行 。 之 所 以 把 这 个 函数 放 到 ready 方 法 的 一 对 小 插 号 之 间 ， 是 因为 ready 事 
件 〈 不 仅仅 是 reaay， 所 有 的 事件 绑 定 都 ) 要 求 其 参数 为 一 个 函数 : 

.ready(function() { 

// jQuery DOM 代码 


alert("The DOM is fully loaded and ready"); 
1; 


window.1oad 方 法 与 document .ready 非 常 相似 ,但 它 要 等 待 所 有 的 图 片 加 载 完 成 之 后 才 会 
执行 用 户 的 jQuery 代码 : 
$ (window) .load (function) { 
//jQuery 代码 


alert ("The window has been loaded"); 


1); 


2.4.1 在 aocument .ready 事 件 处 理 方法 之 外 执行 代码 


绝 大 多 数 用 户 jQuery 代 人 码 都 应 该 放 到 document . ready 0 事件 中 执行 。 但 是 有 些 原生 的 
JavaScript 代 码 ( 如 变量 、 数 组 的 赋值 等 类 似 语句 ) 例外 ， 因 为 它们 并 不 需要 等 到 DOM 准 备 好 以 
后 才 执行 ， 与 DOM 也 没有 任何 交互 。 
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下 面 例子 中 的 代码 必须 等 到 DOM 准 备 好 之 后 才能 执行 ,因为 其 添加 新 内 容 的 行为 依赖 DOM。 
这 段 脚本 共 初 始 化 了 3 个 变量 ， 其 中 前 两 个 在 aocument . ready () 事 件 处 理 方法 之 外 ， 第 三 个 在 
document .ready () 之 内 ， 因 为 添加 内 容 的 for 循 环 要 用 到 它 。 


<!doctype html> 
«html» 


«head» 

«script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery. 
min.js"></script> 

<script> 

var numShows = 10; 

var numTickets = 100; 

$ (document) . ready (function () 
for(i=0; i < numTickets; i++ 

var numTotal = i + 1; 
$('.container').append("«p»There are " + numTotal + 
" tickets available</p>"); 


( 
) t 


} 
1); 
«/script» 
«body» 
«div class="container"> 
«/div» 
«/body» 
</html> 


2.4.2 ”防止 与 其 他 库 发 生 冲突 


在 编写 使 用 jQuery 的 代码 时 , 如果 没 有 适当 的 预防 措施 , 很 可 能 会 与 其 他 JavaScript 库 发 生 冲 
突 。 绝 大 多 数 冲突 都 与 $ 别 名 有 关 ， 因 为 Prototype 库 也 使 用 $ 别 名 。 要 避免 与 别 的 库 发 生 冲 突 , 我 
们 需要 采取 以 下 两 个 步 又 。 

(1) 在 jQuery 库 代 码 的 最 后 添加 一 行 aoconflict 方 法 调用 。 为 了 让 别 的 库 能 正常 工作 ， 
noconflict 方 法 使 jQuery 的 代码 不 再 依赖 这 个 别名 。 

$.noConflict(); 


(2) 修改 所 有 用 到 jQuery 的 代码 ， 将 其 中 的 $ 别 名 改 为 Jouery， 如 下 例 所 示 ， 将 : 


$(document).ready() { 
// 代 码 
1); 


改 成 这 样 : 
jQuery (document).ready() { 


// 代 码 
ye 


如 果 不 想 使 用 别名 jouery， 你 也 可 以 自 定 义 一 个 别名 ， 这 只 需要 一 行 JavaScript 代 码 。 在 下 
面 的 例子 里 ， 我 不 再 使 用 $ ， 而 是 定义 了 新 的 别名 salien。 os 文 么 简单 ! 
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var Salien = jQuery; 


Salien(document).ready() { 
/ / KAR 
1); 


2.4.8 FAjQueryS JavaScript 


变量 是 储存 信息 的 有 效 方式 ， 特 别 在 写 JavaScript 时 。 我 在 写 jQuery 代 码 时 经 常 使 用 变量 , 在 
本 书后 面 的 例子 里 ,我 也 会 经 常 这 样 做 ,在 jQuery 中 使 用 变量 和 在 JavaScript 中 使 用 变量 并 无 不 同 。 
给 变量 赋值 ， 然 后 在 jQuery 包装 器 中 引用 它们 ， 这 本 来 就 是 最 基础 的 JavaScript 内 容 。 

jQuery 之 美 在 于 它 就 是 JavaScript， 如 果 你 有 一 些 JavaScript 知 识 , AR BE, 这些 知识 完全 都 
可 以 用 到 jQuery 上 。 你 不 必 担 心 即将 学 习 的 新 语法 、 新 代码 习惯 和 新 方法 ， 因 为 除了 新 语法 更 容 
易 理 解 和 学 习 之 外 ，jQuery 的 绝 大 多 数 功 能 都 基于 原生 JavaScript。 

你 可 能 会 困惑 ， 如 果 jQuery 就 是 JavaScript， 为 什么 不 直接 学 习 JavaScrpit? 答案 是 : jQuery 能 
做 JavaScript 能 做 的 一 切 ， 而 且 做 起 来 容易 百倍 。jQuery 的 口号 是 “ 写 得 更 少 ,做 得 更 多 ”一 一 一 
点 儿 也 没 错 。 不 需要 特别 了 解 JavaScript， 你 就 可 以 将 20 行 原生 JavaScript 代 码 转 换 为 5 行 jQuery 代 
码 。 如 果 对 JavaScript 有 着 足够 的 好 奇 心 ， 学 习 jQuery 将 有 助 于 你 了 解 JavaScript API. 

JavaScript 难 以 理解 。 有 了 jQuery，Web 设 计 师 不 必 了 解 复杂 的 JavaScript 就 能 用 JavaScript API 
实现 想 要 的 功能 。jQuery 确 实 打 开 了 一 扇 门 ， 让 许 许 多 多 缺少 编程 经 验 的 Web 设 计 师 也 能 为 Web 
站 点 添加 一 些 交 互 。 这 是 一 个 使 用 jQuery 的 最 好 的 时 代 : jQuery 社区 对 jQuery 的 支持 正 以 惊人 的 
速度 成 长 。 


jQuery 基础 


第 3 章 jQuery 核心 : 选择 器 、 过 滤器 及 CSS 
第 4 章 事件 
Se 
S 


用 特效 为 Web 站 点 添 色 


第 3 章 
ipe d iD: 选择 器 
Wiz HA 23 &CSS 


(灵活 的 ) 选择 器 是 jQuery 的 核心 组 成 部 分 ， 因 为 使 用 jQuery 操作 DOM 时 所 做 的 每 件 事 都 和 
选择 需 密切 相关 一 一 总 得 先 选取 元 素 才 可 进行 下 一 步 。jQuery 使 用 常见 的 CSS 选 择 顺 和 XPATH 选 
择 需 ,它们 为 绝 大 多 数 Web 设 计 师 和 开发 者 所 熟悉 。 除 此 之 外 , 还 有 一 些 jQuery 自 定 义 的 选择 需 。 
正 是 这 些 选 择 器 使 得 jQuery 分 外 灵活 ， 易 于 学 习 。 理 解 选择 器 如 何 工 作 ， 才 能 为 充分 利用 jQuery 
的 强大 功能 打 好 坚实 基础 。 

在 那些 CSS 选 择 需 力不从心 的 场合 , 过 滤 需 可 以 让 你 更 灵活 地 根据 DOM 特 性 选取 元 素 。 人 们 

常 结合 使 用 过 滤器 和 选择 器 , 以 便 在 基于 某 一 标准 选择 特定 元 素 时 进行 深度 控制 ,比如 需要 根据 
元 素 在 一 组 元 素 中 的 位 置 ， 或 元 素 的 可 见 性 ， 或 表单 元 素 的 某 些 属性 〈 如 选中 /未 选中 或 是 否 被 
禁用 ) 选取 元 素 时 。 jQuery 还 提供 了 一 系列 为 DOM 元 素 添 加 、 删 除 CSS 类 或 直接 设 定 样 式 的 方法 。 

在 本 章 中 ， 我 将 通过 取 自 真实 项 目的 解决 方案 详细 讲解 选择 咒 、 过 滤器 及 CSS 的 使 用 方法 ， 
让 大 家 彻底 弄 懂 这 些 jQuery 基 础 方法 。 


3.1 使 用 jQuery 选择 器 选取 DOM 元 素 


选择 器 是 jQuery 库 的 一 项 基础 功能 , 由 jQuery Sizzle 选 择 器 引擎 驱动 。Sizzle 引 擎 也 能 用 于 其 他 
语言 ， 却 只 有 jQuery 将 它 的 威力 发 挥 到 了 极致 。 对 那些 非常 了 解 HTML 与 CSS 的 Web 设 计 师 来 说 ， 
Sizzle 的 语法 非常 易于 理解 。jQuery Sizzle 是 用 JavaScript 语 言 写 就 的 ， 专 门 用 来 处 理 jQuery 选择 顺 
的 一 个 引 警 ， 它 除了 支持 通用 的 CSS 选 择 器 和 XPATH 选 择 器 ， 还 支持 一 些 jQuery 自 定义 选择 器 。 

jQuery 选择 器 是 一 个 字符 串 表 达 式 ， 它 负责 选取 C 又 叫 匹 配 ) 一 个 或 一 组 DOM 元 素 , 为 下 一 
步 jQuery 操作 做 准备 。 选 择 器 总 是 在 jQuery 别名 ($ ) 之 后 声明 。 匹 配 并 处 理 完 DOM 元 素 之 后 ， 
匹配 的 结果 集 便 成 为 一 个 jQuery 对 象 , 这 样 就 可 以 在 匹配 元 素 上 应 用 jQuery 丰富 的 方法 ( 如 事件 、 
特效 、 遍 历 、 操 作 等 ) 了 。jQuery 对 象 是 这 样 一 个 东西 ， 在 编写 jQuery 代码 的 过 程 中 ,不管 你 有 
没有 刻意 留意 过 它 ， 它 总 在 那里 ， 不 离 不 弃 。 它 很 重要 ， 应 该 知道 它 ， 重 视 它 ， 了 解 它 。 

下 面 这 行 代 码 展示 了 在 jQuery 中 选择 器 的 用 法 : 


$s (selector) .method() ; 


3.1 使 用 jQuery 选择 器 选取 DOM 元 素 31 


不 需要 做 太 多 练习 ,在 jQuery 中 使 用 选择 器 就 会 成 为 一 项 本 能 ， 这 是 因为 许 许 多 多 的 选择 器 

和 CSS 选 择 器 完全 相同 。 选 择 器 是 在 DOM 中 穿行 的 最 好 工具 ， 并 且 它 选取 元 素 的 最 基本 形式 与 

CSS 选 择 器 语法 完全 相同 ， 不 外 乎 ID 、 类 、 标 签 或 属性 这 几 种 。 在 每 一 条 jQuery 语句 中 ， 选 择 器 

都 是 一 个 基本 组 件 。 

在 使 用 选择 器 时 ，jQuery 语 句 自 动 遍历 DOM 的 全 部 节点 ， 寻 找 与 该 选择 器 匹配 的 元 素 ， 遍 历 

得 到 的 结果 又 称 为 匹配 集 。 那 些 精通 CSS 并 透彻 理解 DOM 的 Web 设 计 师 可 轻易 上 手 jQuery 选 择 器 。 

组 成 选择 器 的 JavaScript 部 分 有 。 

O jQuery 别名 (jcouery 或 $ )。 

OQ 要 查找 的 DOM 元 素 ， 被 两 个 小 括号 及 其 中 的 引号 包 庄 。 

a 紧 接 着 选择 器 的 是 你 要 用 到 的 jQuery 方法 。 从 为 选中 的 元 素 设 定 CSS 样 式 到 让 页 面 元 素 动 
起 来 ,jQuery 方法 几乎 无 所 不 能 。 这 些 方法 ( 即 函数 ) 完成 具体 的 事情 并 可 接受 括 在 小 括 
号 中 的 参数 。 

表 3-1 解 析 了 jQuery 选择 需 语 句 。 

表 3-1 jQuery 选择 器 语句 解析 


jQuery 别名 选 择 器 jQuery 方法 或 行为 
$ 或 jQuery ('div') .csSs('border','1px solid #333'); 


使 用 CSS 选 择 器 选取 页 面 元 素 


JavaScript 本 身 提 供 了 根据 元 素 ID 或 标签 选取 元 素 的 方法 。 这 些 方 法 的 不 便 之 处 在 于 ， 你 不 
得 不 为 处 理 3 种 不 同类 型 的 元 素 各 写 一 个 函数 。 不 用 说 ， 这 会 带 来 重复 而 腔 肿 的 代码 ， 而 且 会 越 
来 越 难以 管理 和 维护 。jQuery 的 一 个 选择 器 可 处 理 多 种 类 型 的 元 素 ， 自 然 容 易 写 出 干净 日 便 于 管 
理 的 代码 。 

本 书 所 有 的 例子 都 同时 配 有 浏览 器 输出 结果 和 Firebug 输 出 结果 ， 这 样 可 方便 我 们 查看 DOM 
到 底 发 生 了 哪些 改变 。( 要 了 解 如 何 安装 和 使 用 Firebug， 请 参阅 第 2 章 。) 我 们 查看 页 面 源 代码 的 
时 候 ， 没 有 办 法 看 到 经 过 JavaScript 处 理 后 的 源 代 码 ， 而 JavaScript 处 理 之 后 的 代码 才 是 页 面 真 正 
对 应 的 代码 。( 浏览 器 加 载 页 面 之 后 ， 我 们 可 以 使 用 JavaScript 操 作 DOM， 对 页 面 做 相当 大 的 修 
改 。) Firebug 不 但 让 我 们 看 到 修改 之 后 的 代码 ， 其 至 还 能 让 我 们 看 到 源 代码 的 实时 变更 过 程 ， 实 
在 是 一 个 测试 JavaScript 和 jQuery 的 极 佳 工具 。 

下 面 列 出 了 最 常用 的 CSS 选 择 器 。 接 下 来 我 将 利用 示例 代码 和 浏览 器 深入 介绍 它们 的 用 法 : 
Os('*') 
Os 
Os 
Os 
Os 


p') 
.class') 
#id') 


ji 
is 
A 
i3 


.parent ul 1i') 
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在 本 章 中 ， 我 使 用 jQuery 的 .css () 方 法 设置 元 素 的 样式 。jQuery 的 CSS 方 法 支持 任意 的 CSS 
属性 参数 , 并 将 相应 的 样式 应 用 到 选择 器 匹配 的 元 素 上 。 这 些 CSS 属 性 将 在 DOM 完 全 加 载 后 以 内 
内 样 式 的 方式 应 用 到 目标 元 素 上 。 

这 些 例子 中 ， 你 不 必 拘 泥 于 我 使 用 的 CSS 属 性 。 我 只 是 演示 几 个 你 可 能 会 遇 到 的 问题 ， 教 你 
用 选择 器 迅速 解决 它们 。 

1. 使 用 通配符 选择 器 选取 元 素 
如 果 你 打算 选取 DOM 中 所 有 的 元 素 , 或 者 某 个 元 素 内 的 所 有 元 素 , 那 就 用 通配符 选择 锅 (* )。 
在 jQuery 别名 $ 符 号 之 后 ， 用 一 对 小 括号 把 用 引号 包括 的 星 号 (* ) 包 起 来 ， 就 构成 了 通配符 选 
Fear. 
在 下 面 的 HTML 示 例 里 ,我 使 用 通配符 选择 器 选取 页 面 中 所 有 的 元 素 ,并 为 每 个 元 素 设 置 CSS 
边框 。 我 使 用 下 面 的 语句 设置 边框 样式 : 
$('*').css('border', 'lpx solid #333'); 
图 3-1 展 示 了 浏览 器 中 下 面 这 个 脚本 示例 的 输出 ， 图 中 Firebug 已 激活 ， 且 打开 了 HTML 标 签 ， 
这 样 你 就 能 方便 地 观察 到 jQuery 为 页 面 中 的 每 个 元 素 添加 内 上 藤 边框 样式 的 过 程 。 
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图 3-1 浏览 器 输出 〈 使 用 通配符 选择 器 为 页 面 上 的 每 个 元 素 添 加 了 边框 ) 


<!doctype html» 
«html» 
«head» 
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<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 

<script> 

$ (document) .ready(function() { 
$('*').css('border','1px solid #333'); 

dG 

</script> 

<body> 
<div class="container"> 
<hi>Hello jQuery.</h1> 
</div> 

</body> 

</html> 


2. 使 用 HTML 标 签 选择 元 素 

在 了 解 通配符 选择 融 如 何 工作 之 后 ， 接 下 来 我 们 会 看 到 其 他 CSS 选 择 需 也 是 以 同样 的 方式 工 
作 。 使 用 元 素 选 择 器 一 一 把 标签 名 作为 参数 传递 给 选择 器 ,我 们 就 可 以 选中 DOM 中 页面 内 ) 该 
标签 对 应 的 所 有 元 素 。 这 个 选择 需 内 部 使 用 的 是 原生 JavaScrip 仿 法 getElementsByTagName () 。 

原生 的 JavaScript 方 法 getElementsByTagName () 能 根据 标签 名 字 获 取 标 签 对 应 的 所 有 元 
素 ， 相 应 代码 如 下 : 

document.getElementsByTagName('h1'); 

在 下 面 这 个 例子 中 , 我 将 设 定 h1 标 签 的 font-family 必 性。 我 可 以 通过 修改 级 联 样式 表达 到 
目的 ， 但 并 不 想 影响 其 他 页 面 的 np1 标 签 ( 修改 CSS 则 会 )。 因此 ， 我 使 用 标签 选择 器 选中 元 素 ， 
然后 用 css () 方 法 改变 当前 页 面 中 标签 为 h1 的 元 素 的 font-family 属 性 。 这 里 的 CSS 方 法 只 会 作 
用 于 我 选中 的 h1 元 素 。 

图 3-2 展 示 了 浏览 器 中 下 面 这 个 脚本 示例 的 输出 ， 图 中 Firebug 已 激活 ， 且 打开 了 HTML 标 签 。 
这 个 例子 演示 了 DOM 加 载 完 成 之 后 ，DOM 中 hi 元 素 的 font-family 属 性 被 修改 的 过 程 。 

<!doctype html» 

«html» 


«head» 
<script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 


«/script» 

«script» 

$(document).ready(function() ( 
$('h1').css('font-family', 'arial,verdana'); 

1); 


«/script» 


«body» 
«div class-'container'» 
<hi>Hello jQuery.</h1> 
</div> 
</body> 
</html> 
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V <html> 
This element has no style rules. 
b. <head> E 


EYE = E 
<div class="container"> 


«hi style-"font-family: arial,verdana;">Hello jQuery. «/hl» 
</div> 
</body> 
</html> 
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图 3-2 ”工作 中 的 元 素 选 择 髓 


3. 使 用 ID 选择 器 选取 元 素 
使 用 ID('# ' ) 选 择 器 可 选中 页 面 中 任意 一 个 ID 对 应 的 元 素 .ID 选 择 器 使 用 的 是 原生 JavaScript 
方法 getElementById() ， 代 码 如 下 : 


document .getElementById('sidebar'); 


IDLE ELETI A, URIBE MES, MIAP EMIR AIDE AE 
匹配 成 功 ， 就 会 返回 匹配 的 唯一 元 素 。 我 们 知道 ， 在 一 个 页 面 中 一 个 ID 只 能 对 应 一 个 元 素 。 

在 下 面 的 例子 中 ,我 打算 使 用 CSS 隐 藏 #sidebar 这 个 div。 我 使 用 jQuery 选择 器 $ ('#sidebar') 
把 它 从 文档 中 选 出 来 。 为 了 隐藏 这 个 giv 元 素 ， 我 使 用 CSS 方 法 把 该 元 素 的 display 属 性 设置 为 


nones 
图 3-3 展 示 了 使 用 ID 选择 器 隐藏 #siqebar 对 应 div 元 素 的 浏览 器 输 出 : 


<!doctype html» 
«html» 
«head» 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
$ (document) .ready(function() { 
$('#sidebar').css('display','none'); 
Pb 
«/script» 
«body» 
«div id-'sidebar'» 
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<h1>My sidebar</h1i> 
<ul> 
<li><a href='/nav'>Navigation</a></1li> 
</ul> 
</div> 
</body> 
</html> 
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图 3-3 ”选中 #sidebar 元 素 后 的 浏览 器 输出 


4. 使 用 类 选择 器 选取 元 素 

在 页 面 中 我 们 可 以 用 ID 选 取 元 素 ， 类 似 地 ， 我 们 也 可 以 用 类 ( .class ) 选取 元 素 。 这 个 选 
择 器 使 用 JavaScript 原 生 方 法 getElementsByClassName () 完成 工作 。" 类 选择 器 用 来 选择 DOM 
中 具有 特定 类 的 所 有 元 素 。 如 果 我 们 用 原生 JavaScript 方 法 getElementsByClassName 选 取 一 个 
类 ， 写 出 来 的 代码 就 像 下面 这 样 : 

document .getElementsByClassName('product-image') ; 

使 用 jQuery， 我 们 可 以 使 用 非常 少 的 代码 实现 getElementsByCclassName () 方 法 的 目标 。 

在 下 面 的 例子 中 ， 我 打算 为 (图 片 ) 设置 1 px 宽 的 灰色 边框 ，5 px 的 内 边 距 ， 并 将 它 的 宽度 
设置 为 150 px。jQuery 的 CSS 方 法 支持 对 象 字 面 量 (一 个 逗号 分 隔 的 名 / 值 对 列表 ， 有 助 于 组 织 代 
E) 参数 ， 以 这 种 方式 一 次 设置 多 个 CSS 属 性 ， 代 码 既 简单 又 整洁 。 

下 面 我 使 用 类 选择 器 选中 页 面 中 所 有 的 .telepnone 元 素 ， 并 传 给 CSS 方 法 3 个 CSS 属 性 ， 


D 较 老 的 浏览 器 没有 getElementsByClassName 方 法 ， 对 这 些 浏览 器 ，jQuery 使 用 自己 的 算法 选取 元 素 。 
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、 过 滤器 及 CSS 


因此 我 需要 用 一 对 大 括号 将 这 些 属性 括 起 来 。 图 3-4 展 示 的 是 选中 元 素 并 设置 样式 之 后 的 浏览 器 


输出 。 


<!doct 
«html» 
<hea 


ype html» 


d> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 


«/sc 
«scr 
$ (do 


$('.telephone').css({'padding':'5px', 'border': 


1); 
«/sc 


ript» 
ipt» 
cument).ready(function() 


ript> 


<body> 
<div id='container'> 
<h1>Hello jQuery</h1> 


<div class='telephone'><img 
<div class='telephone'><img 
<div class='telephone'><img 
<div class='telephone'><img 
<div class='telephone'><img 
<div class='telephone'><img 
<div class='telephone'><img 
<div class='telephone'><img 
</div> 

</body> 

</html> 
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Phone Boxes Galore! 


# W Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity Yslow 
i$ 5 Edit © body < html Style» | Computed Layout 
Y > 
ics This element has no style rules 
> <head> 


= 
<div id="container"> 


<hl> Phone Boxes Galore! </hi> 


> «div class="telephone” style="border: 1px solid rgb(204, 


204, 204); width: 250px; padding: 10px;" 
P <div class-"telephone" style="border 
204, 204); width: 250px; padding: 10px;" 
P «div class-"telephone" style="border: 
204, 204); width: 250px; padding: 10px;"> 


px solid rgb(204, 


px solid rgb(204, 


> «div class="telephone" style="border: 1px solid rgb(204, 


204, 204); width: 250px; padding: 10px;"» 


> «div class-"telephone" style="border: 1px solid rgb(204, 


204, 204); width: 250px; padding: 10px;"> 


b <div class-"telephone" style="border: 1px solid rgb(204 t 


DOM 


图 3-4 
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选中 页 面 中 拥有 telephone 类 名 的 元 素 并 设置 样式 之 后 的 浏览 器 输出 
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5. 使 用 多 个 类 选取 一 个 或 多 个 元 素 

在 茶 些 场合 , 我 们 会 给 一 些 元 素 设置 多 个 类 , 并 打算 只 选取 这 些 同 时 拥有 多 个 类 的 元 素 。 在 
类 选择 器 中 可 以 使 用 多 个 类 。 

下 面 的 例子 里 ， 有 6 个 元 素 具 有 不 止 1 个 类 。 我 打算 使 用 jQuery 的 类 选择 器 和 CSS 方 法 隐藏 那 
些 同 时 具有 book 类 和 inactive 类 的 元 素 。 图 3-5 展 示 的 是 选择 器 匹配 的 多 个 元 素 成 功 被 隐藏 之 后 
的 浏览 右 输 出 。 


<!doctype html» 
«html» 
«head» 
«script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
</script> 
<script> 
$ (document) . ready (function() { 
$('.book.inactive').css('display','none'); 
1); 


«/script» 


«body» 
«div class='book inactive'> 
<p>Travel Guide to NYC</p> 
</div> 
<div class='book active'> 
<p>Travel Guide to San Francisco</p> 
</div> 
<div class='book inactive'> 
<p>Travel Guide to Seattle</p> 
</div> 
<div class='book active'> 
<p>Travel Guide to Miami</p> 
</div> 
<div class='book active'> 
<p>Travel Guide to Palo Alto</p> 
</div> 


</body> 
</html> 


6. 使 用 子 元 素 选 择 器 选取 元 素 

当 无 法 使 用 标签 、CSS 和 ID 选 择 器 时 ,我 们 可 以 使 用 子 元 素 选 择 融 这 种 非常 有 用 的 页 面 元 素 
选择 器 。 除 了 IE6， 其 他 现代 浏览 器 都 支持 CSS 中 的 子 元 素 选 择 器 。 你 惊讶 吗 ?我 不 惊讶 "。 最 棒 
的 是 jQuery 中 的 子 元素 选 择 需 支持 了 下 6。 在 符 套 元 素 ( 如 导航 菜单 ) 中 选取 元 素 时 ， 子 元 素 选 择 
器 特别 有 用 。 

FOCI A > 选择 符 选 取 给 定 父 元 素 的 直接 子 元 素 。 看 看 下 面 这 个 语句 , 它 选取 body 
元 素 内 的 所 有 直接 子 元 素 p: 


$('body > p') 


CD 任何 有 经 验 的 Web 开 发 者 都 不 会 惊讶 。. 
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Travel Guide to Miami 
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P Up Console  HTMLv | CSS Script DOM Net  PageSpeed Page Speed Activity — YSlow ( eco 
kè Edit body html Style» Computed Layout DOM 
了 
dica This element has no style rules. 
> <head> 


a ae 
div 1 book inactive" sty display: none; 


> «div class="book active"> 
> «di s-"book inactive" style-"display: none; 
> «div class="book active"> 
> «div class="book active"> 
«/body» 
</html> 
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图 3-5 ARANA A bookflinactive h PICA 2f ESRCE (TZ Ja B DU V, d h 


不 过 ， 如 果 需 要 在 某 个 div 元素 内 选取 某 个 特殊 的 子 元 素 p， 为 了 找 出 正确 的 后 代 元 素 ， 我 
们 就 不 得 不 在 选择 器 中 加 上 该 元 素 更 具体 的 类 名 或 ID。 

在 下 面 这 个 例子 里 ， 我 先 找 出 具有 . inactive 类 的 元 素 ， 再 选取 它 的 子 元 素 p， 然 后 在 该 段 
落 的 末尾 用 红字 加 上 “Sorry, this book is sold out” 字 样 。 我 会 使 用 链 式 调用 方法 把 这 一 连 串 动作 
写 在 一 个 语句 中 。 图 3-6 展 示 了 该 语句 执行 后 的 浏览 器 输出 。 


<!doctype html» 
«html» 
«head» 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
$ (document) .ready(function() { 
$('.book.inactive > p').css('display','none'); 
$('.book.inactive').append('Sorry this book is sold out!').css('color', 
'red'); 
1); 
«/script» 


«body» 
«div class-'book inactive'» 
<p>Travel Guide to NYC</p> 
</div> 
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<div class='book active'> 
<p>Travel Guide to San Francisco</p> 
</div> 
<div class='book inactive'> 
<p>Travel Guide to Seattle</p> 
</div> 
<div class='book active'> 
<p>Travel Guide to Miami</p> 
</div> 
<div class='book active'> 
<p>Travel Guide to Palo Alto</p> 


</div> 
</body> 
</html> 
AAO Mozilla Firefox 
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Travel Guide to Miami 
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This element has no style rules 


«div class="book inactive" style="color: red;"» 
p style="display: none;"» Travel Guide to NYC </p: 
Sorry this book is sold out! 
</div> 
> <div class="book active"> 
> <div class="book inactive" style="color: red;"> 
P «div class-"book active" 
> «div class="book active" 
«/body» 
</html> 
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7. 使 用 后 代 元 素 选 择 器 选取 元 素 

子 元 素 选择 器 只 匹配 直接 子 元 素 ， 比 如 匹配 ul 标签 内 的 1i 标 签 。 如 果 要 选取 目标 元 素 的 孙 
元 素 、 重 孙 元 素 等 ， 就 需要 使 用 后 代 元 素 选 择 器 。 子 元 素 选 择 器 和 后 代 元 素 选择 器 的 区 别 在 于 
是 否 使 用 > 操作 符 。 如 果 去 掉 子 元 素 选择 器 中 的 > 符号 ， 就 能 够 选取 所 有 的 后 代 元 素 ( 包括 子 
TER )。 
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在 下 面 这 个 例子 中 ， 我 先 找 出 <ul class="sidebar-nav"> 标 签 内 的 所 有 1i 标 签 ， 然 后 再 
为 它们 添加 边框 样式 。 图 3-7 展 示 了 选取 后 代 元 素 并 设置 样式 之 后 的 浏览 器 输出 。 


<!doctype html> 
«html» 
«head» 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
$ (document) .ready(function() { 
$('ul li').css('border','3px dashed blue'); 
1); 
</script> 


<body> 
<ul class="sidebar-nav"> 
«li»Link 1«/li» 
«li»Link 2«/li» 
«li»«ul» 
<li>Sub Link 1«/li» 
<li>Sub Link 2«/li» 


</li> 
</ul> 
</body> 
</html> 
000 Mozilla Firefox © 
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P ui Console HTML» | CSS Script DOM Net  PageSpeed Page Speed Activity — YSlow ( oeo 
&$ : Edit body html Style» | Computed Layout DOM 
了 
<html> This element has no style rules. 
> <head> 


EE = 
<ul class="sidebar-nav"> 


<li style="border: 3px dashed blue;"»Link 1«/li» 
<li style="border: 3px dashed blue;">Link 2</li> 
VY <li style="border: 3px dashed blue; "> 
Y at 
<li style="border: 3px dashed blue;">Sub Link 1«/li» 
<li style="border: 3px dashed blue;"» Sub Link 2</li> 
</ul> 
«ni» 
</ul> 
</body> 
</html> 
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图 3-7 ”选取 后 代 元 素 并 设置 样式 之 后 的 浏览 器 输出 〈 另 见 彩 插图 3-7 ) 
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8. 组 合 选择 器 

有 时 候 我 们 需要 同时 选取 多 种 类 型 的 元 素 , 这 就 需要 组 合 使 用 类 选择 器 、ID 选 择 顺 、 标 签 选 
择 器 或 者 子 元 素 选择 器 。 在 jQuery 中 ， 使 用 逗号 分 隔 的 选择 器 列表 字符 串 就 可 达成 目的 。 

在 下 面 这 个 例子 中 ,我 先 用 逗号 分 隔 开 5 个 不 同 的 类 和 2 个 不 同 的 ID， 然 后 使 用 CSS 方 法 把 所 
有 匹配 元 素 的 背景 设置 成 灰色 。 图 3-8 展 示 了 选取 元 素 并 设置 样式 之 后 的 浏览 器 输出 。 
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图 3-8 ”选取 多 种 类 型 元 素 并 设置 样式 之 后 的 浏览 器 输出 


<!doctype html» 
<html> 

<head> 

«script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 

«/script» 

«script» 

$(document).ready(function() ( 

$('.book-one, .book-two, .book-three, .book-four, .book-five, #header, 
#footer p').css('background','#ccc'); 
1); 
«/script» 


«body» 
«div id='header'><h1>Book Club</h1></div> 
<div class='book-one'> 
<p>Travel Guide to NYC</p> 
</div> 
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<div class='book-two'!> 
<p>Travel Guide to San Francisco</p> 


<div class='book-three'!> 
<p>Travel Guide to Seattle</p> 


<div class='book-four'> 
<p>Travel Guide to Miami</p> 


<div class='book-five'> 
<p>Travel Guide to Palo Alto</p> 
</div> 
<div id='footer'><p>Copyright 2010</p></div> 
</body> 
</html> 


3.2 ”使 用 jQuery 过 滤器 过 滤 元 素 


过 滤器 用 来 进一步 提炼 选择 器 匹配 的 元 素 。 当 我 们 只 需要 在 DOM 中 选取 一 个 或 几 个 元 素 时 ， 
过 滤器 非常 好 用 。 如 果 只 是 处 理 一 个 静态 HTML 文 档 ， 调 整 HTML 非 常 简单 。 但 是 ， 如 每 一 次 页 
面 请 求 或 加 载 时 ，DOM 都 会 变动 ， 我 们 就 需要 使 用 前 端 语言 (如 JavaScript ) 动态 添加 格式 。 

过 滤 需 的 格式 为 一 个 冒号 加 上 过 滤 需 的 名 字 ， 即 :过 滤器 名 。 


3.2.1 基本 过 滤器 及 应 用 


自 jQuery 1.4.2 起 ，jQuery 一 共 定 义 了 20 个 过 滤器 。 我 会 给 出 最 常用 过 滤 絮 的 真实 应 用 示例 ， 
所 有 可 用 的 jQuery 过 滤器 见 表 3-2。 

在 表 3-2 中 列 出 的 过 滤器 当中 , CSS 选择 器 一 栏 打 着 “是 ”标志 的 伪 类 是 在 css3 标 准 中 定义 的 。 
目前 只 有 比较 新 的 浏览 器 完整 地 支持 这 些 属性 ， 如 Firefox 3+, Opera 10+, Safari 3+。 若 需要 查 
看 完整 的 CSS 属 性 列表 ， 可 参考 www.css3.info 网 站 。jQuery 完 全 支持 这 些 CSS3 属 性 ， 它 们 可 以 安 
全 的 作为 过 滤器 结合 选择 器 使 用 。 


表 3-2 ”过 滤器 及 其 功能 列表 


名 字 功 能 属于 CSS3 选 择 器 
:even 和 :odd 匹配 结果 集中 顺序 为 偶数 : even) 或 
奇数 (odda) 的 元 素 
:header 匹配 标题 元 素 H1 、H2 、H3 、H4 等 标 
签 
:not 不 匹配 后 面 选择 器 的 元 素 是 
:eq (index) 匹配 顺序 号 等 于 index 的 元 素 
:gt (index) 匹配 顺序 号 大 于 index 的 元 素 
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CER) 
Z ou Zu 能 属于 CSS3 选 择 器 
:1t (index) DO AOI S/F index 的 元 素 
:first-child, :last-child, :only-child, 分 别 匹配 第 一 个 、 最 后 一 个 、 " 独 是 
nth-child(index) ' =. VRAC Ie 
:has (p) 匹配 包含 p 元 素 的 元 素 
:contains('this is my text') 匹配 包含 this is my text 文 本 ” 
的 元 素 
: empty 匹配 无 内 容 的 元 素 (如 <img /> 是 
mM<p></p> ) 
:parent 匹配 拥有 子 元 素 的 元 素 
:hidden 匹配 不 可 见 的 元 素 
:visible 5 配 可 见 的 元 素 
:animated c 配 正 处 于 动画 过 程 中 的 元 素 


3.2.2 利用 :even 和 :odd 过 滤器 生成 条 纹 表格 


为 表格 的 奇数 行 或 偶数 行 加 上 淡淡 的 灰色 背景 (条纹 效果 ) 从 而 使 表格 更 容易 阅读 ， 是 很 党 

见 的 做 法 。jQuery 中 的 :even 和 :odd 过 滤器 让 这 件 事情 做 起 来 分 外 容易 。 这 两 个 过 小 融 并 非 为 实 

现 条 纹 效果 而 生 ， 利 用 它们 还 能 做 其 他 很 多 很 多 事情 ,不 过 话说 回来 ,制作 条 纹 效果 确实 是 一 个 
很 好 的 教学 示例 。 图 3-9 展 示 了 页 面 载 人 完成 后 为 表格 偶数 行 添加 背景 色 之 后 的 浏览 锅 效 果 。 


<!doctype html» 
«html» 
«head» 
<script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
«/script» 
«script» 
$(document).ready(function() ( 
$('tr:even').css('background', '#dedede') ; 
$('tr:odd').css('background', '#f£ffff£E'); 
1): 


«/script» 


«body» 
<table> 
<tr> 
<th>Product</th> 


OD :eq(incex), :gt(index), :1t (index) 中 的 ijndex 是 从 0 开始 计数 的 。 
© 这 里 的 index 从 1 开始 计数 。 
@ 此 处 匹配 文本 区 分 大 小 写 ， 可 以 加 引号 ， 也 可 以 不 加 。 


<th>Description</th> 
<th>Price</th> 
</tr> 
<tr> 
<td>Paper Towels</td> 
<td>The most absorbent paper towels.</td> 
<td>$18.99</td> 
</tr> 
<tr> 
<td>Paper Napkins</td> 
<td>Perfect for your outdoor gathering.</td> 
<td>$16.99</td> 
</tr> 
<tr> 
<td>Paper Plates</td> 
<td>The best value.</td> 
<td>$5.99</td> 
</tr> 
<tr> 
<td>Plastic Forks</td> 
<td>The essential picnic accessory.</td> 
<td>$2.99</td> 
</tr> 

</table> 

</body> 
</html> 


Mozilla Firefox € 


Gb: c) Qo 


Lf. http: //smashingjquery.com/code/chap04/example4-9.html wr) Ch Google Qa) 另 " 
Disable + Cookies + |. CSS + 回 Forms + |E) Images ~ Information * | / Miscellaneous + Outline + 22 Resize + gP Tools + View Source + Options 
PTS g 
l [O] http://smashingj...example4-9.htmi = 
Product Description Price 


Paper Towels The most absorbent paper towels. $18.99 
Paper Napkins Perfect for your outdoor gathering. $16.99 
Paper Plates The best value. $5.99 
Plastic Forks The essential picnic accessory. — $2.99 


P ap Console | HTMLv | CSS Script DOM Net Page Speed Page Speed Activity YSlow ( )eeo 
&$ | Edit © body < html Stylev | Computed Layout DOM 
7o «neuu» 
«table» 
Y <tbody> 
> <tr style="background: none repeat scroll @% 0X rgb(222, 
222, 222);"> 
P <tr style="background: none repeat scroll 0% 0% rgb(255, 
255, 255);"> 
> 


«tr style="background: none repeat scroll 0X 0X rgb(222, 
222, 222);"> 
«tr style="background: none repeat scroll 0X 0X rgb(255, 
255, 255);"> 

P «tr style-"background: none repeat scroll 0X 0X rgb(222, 

222, 222);"> 

«/tbody» 

</table> 


> 


[Fr 


a 
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图 3-9 表格 的 偶数 行 背景 与 其 他 行 不 同 
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3.2.3 ”为 列表 或 集合 中 的 第 一 个 和 最 后 一 个 元 素 设 置 样式 


如 果 需 要 从 DOM 内 的 某 个 元 素 集中 找 出 第 一 个 或 最 后 一 个 元 素 ， 当 然 是 使 用 :first 
和 :1ast 过 滤器 最 简便 。 这 两 个 过 滤 需 依据 结果 集 的 索引 ( 至 多 ) 返回 一 个 元 素 。 
在 下 面 这 个 例子 中 , 我 会 为 列表 中 除 第 一 个 和 最 后 一 个 之 外 的 每 个 元 素 添 加 下 边线 。 有 两 种 
方法 可 以 达到 这 个 目标 ， 一 种 方法 是 为 列表 中 的 最 后 一 个 (和 第 一 个 ) 元 素 添 加 一 个 . last 类 ， 
另 一 种 方法 是 结合 使 用 :first 和 :1Last 过 滤器 及 ul 1i 选 择 器 。 图 3-10 展 示 了 在 这 个 列表 上 应 m 


用 :first 和 :1ast 过 滤器 之 后 的 效果 。 


Mozilla Firefox 


(4 ) 四 (ce) C ) (tr) e http://smashingjquery.com/code/chap04/example4- 10.html w Y) BE Google Qa) wir 


@ Disable * Æ Cookies + J CSS + E] Forms * |Æ Images * @ Information * ^. Miscellaneous * 4 Outline * 72 Resize * g Tools * $2) View Source + +> Options 
] D) http: /smashing...xamplea-10.htm! 


My sidebar 


* Home 

e About Us 

* Customer Service 
* Contact Us 


* Coupons 
+ TẸ Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity — YSlow ( eco 
kB Edit li ul div#sidebar body html Style» | Computed Layout DOM 
Y <html> element.style { 
> <head> border: medium none; 
Y <body> } 
V <div id-"sidebar"» wl lit example4-10.html (line 6) 


border-bottom: 1px solid #333333; 
} 


Inherited from ul 


<hl>My sidebar </hl> 


example4- 10.html (line 5) 


ul { 
font-family: arial; 


} 


A BA 25.4K 0451s A 
图 3-10 ”除了 第 一 个 和 最 后 一 个 ,列表 中 所 有 元 素 都 有 下 边线 


«doctype html» 
«html» 
«head» 
«style» 
ul (width:200px;font-family:arial;) 
ul li {border-bottom:1px solid #333;} 
ul li a {text-decoration:none; } 
«/style» 
<script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
«/script» 
«script» 
$(document).ready(function() ( 
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$('ul li:first').css('border','none'); 
$('ul li:last').css('border', 'none'); 
i$ 
«/script» 
«body» 
«div id-'sidebar'» 
<hl>My sidebar</h1> 
«ul» 
<li><a href='/index'>Home</a></1i> 
<li><a href='/about'>About Us</a></1li> 
<li><a href='/customer-service'>Customer Service</a></1li> 
<li><a href='/contact'>Contact Us</a></li> 
<li><a href='/coupons '>Coupons</a></1i> 
</ul> 
</div> 
</body> 
</html> 


3.2.4 找 出 包含 特定 元 素 的 元 素 


有 时 候 ， 我 们 需要 找 出 那些 包含 某 个 元 素 的 元 素 。 在 这 种 情况 下 ，:has 过 滤 需 就 派 上 了 用 
场 。:has 并 不 要 求 被 包含 的 元 素 是 父 元 素 的 直接 子 元 素 ， 只 要 是 后 代 元 素 就 行 。 

下 面 这 个 例子 中 , 我 使 用 :has 过 滤器 找 出 具有 .content 类 并 且 包含 p 标 签 的 元 素 , 把 它 的 字 
号 设置 为 18 px。 图 3-11 展 示 了 浏览 器 的 显示 效果 。 


<!doctype html» 
«html» 
«head» 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
$ (document) .ready(function() { 
$('.content:has(p)').css('font-size''','''18px'); 
Hi 
«/script» 


«body» 
«div id="main"> 
«div class="content"> 
<p>This is my content</p> 
«/div» 
«div class="alternate"> 
<p>This is alternate content.</p> 
«/div» 
«/div» 
«/body» 
«/html» 
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000 Mozilla Firefox 
Caa) GE) (CX GA) CLIE http: //smashingjquery.com/code/chap04/example4-11.htm! wr) Ga: jle Q) > 
@ Disable + & Cookies + |. CSS + [7] Forms + / Images + @ Information + C3 Miscellaneous * / Outline + 22 Resize + g Tools + $2) View Source * {> Options 


ID http://smashing...xample4-11L.html | + 


This is my content 


This is alternate content. 


AX Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow CC OOD 
&$ $ Edit | divcontent < divémain < body < html Style» | Computed Layout DOM 
V <html> element.style { 

> <head> border: medium none; 

V <body> 


V «div id="main 
"ES 


intent </p> 
</div> 
Y <div class="alternate"> 
<p> This is alternate content. </p> 


i; Done BBA 25.1K 0.4455 A 


图 3-11 包含 ep 标签 的 . content ILA 


3.2.5” 找 出 不 包含 任何 子 元 素 或 文本 的 元 素 


如 果 要 找 出 那些 空 无 一 物 的 元 素 ( 不 包含 子 元 素 , 也 不 包含 文本 )，:empty 过 滤器 就 很 给 力 。 

在 下 面 这 个 例子 中 ， 如 果 error div 为 空 ， 我 就 把 它 藏 起 来 。 这 很 好 办 ， 只 要 使 用 .error 
这 个 类 选择 器 加 一 个 :empty 伪 类 过 滤器 就 可 以 了 。 如 果 .error 元 素 有 内 容 ， 它 照常 显示 ， 否 则 
设置 它 的 display 属 性 为 none。 图 3-12 展 示 的 是 这 个 选择 器 匹配 成 功 的 效果 。 


<!doctype html> 
«html» 
«head» 
«script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
«/script» 
«script» 
$(document).ready(function() ( 
$('.error:empty)').css('display',' 'none'); 
1); 


«/script» 


«body» 
«div id="main"> 

«div class="error"></div> 
«div class="error">This is my error message</div> 
«div class="content"> 
<p>This is my content</p> 
«/div» 
«div class="alternate"> 
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<p>This is alternate content.</p> 


</div> 
</div> 
</body> 
</html> 
一 Mozilla Firefox = 
( 4)r )- Ce (X GA) CO tt: /smashingjquery.com/code/chapo4/example4-12.html vv) Gi coos a) ii 


(B Disable + Æ Cookies + |. CSS + 回 Forms + $ Images + @ Information + |) Miscellaneous + ./ Outline * Š% Resize * j^ Tools + {2] View Source + |j? Options 
] D) http /smashing...xamplea-12.html 


This is my error message 
This is my content 


This is alternate content. 


# È Console HTML | CSS Script DOM Net PageSpeed Page Speed Activity YSlow ( )eeo 
i$ | Edit © diverror < divémain < body < html Style» | Computed Layout DOM 
Y <html> element. style { 

> chead> display: none; 


Y <body> 
VY <div id-"main"> 


<div class="error">This is my error message </div> 


> <div class="content"> 
> <div class-"alternate"» 


3* B vstow 


图 3-12 ”选择 器 成 功 匹 配 ，. error It Be EEL IE 


3.2.0 ”根据 元 素 包含 的 文本 过 滤 元 素 


有 时 候 需 要 根据 元 素 包 含 的 内 容 匹 配 元 素 , 我 们 可 以 用 :contains 过 滤器 实现 这 一 目标 。 传 
递 给 :contains 过 滤器 的 文本 可 以 用 引号 括 起 来 ， 也 可 以 不 用 。 

在 下 面 的 例子 中 ， 我 将 使 用 :contains 过 滤器 找 出 表格 中 包含 Paper Towels 字 样 的 单元 格 ， 
为 其 添加 1 px 虚线 边框 。 图 3-13 展 示 的 是 这 个 选择 器 匹配 成 功 并 设置 样式 后 的 效果 。 


<!doctype html> 
«html» 
«head» 
<script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
«/script» 
<script> 
$ (document) .ready(function() { 
$("tr td:contains('Paper Towels')").css('border','1px dashed #333'); 
2); 
«/script» 


«body» 
«table» 
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<tr> 
<th>Product</th> 
<th>Description</th> 
<th>Price</th> 
</tr> 
<tr> 
<td>Paper Towels</td> 
<td>The most absorbent paper towels.</td> 
<td>$18.99</td> 
</tr> 
<tr> 
<td>Paper Napkins</th> 
<td>Perfect for your outdoor gathering.</th> 
<td>$16.99</th> 
</tr> 
<tr> 
<td>Paper Plates</td> 
<td>The best value.</td> 
<td>$5.99</td> 
</tr> 
<tr> 
<td>Plastic Forks</td> 
<td>The essential picnic accessory.</td> 
<td>$2.99</td> 
</tr> 
</table> 
</body> 
</html> 


Mozilla Firefox 


(J Ce) CO Gf). G hnp://smashingjquery.com/code/chap04/example4-13.hml ——— Yr) Cl Goole a) ia- 


@ Disable + Æ Cookies * L] CSS + =] Forms + (Œ| Images * @ Information + C3 Miscellaneous * 4 Outline + 22 Resize + gP Tools + {2) View Source * DD Options 
] D) http://smashing...xample4-13.htmi 


Product Description Price 


¿The most absorbent paper towels. $18.99 
Paper Napkins Perfect for your outdoor gathering. $16.99 
Paper Plates The best value. $5.99 
Plastic Forks The essential picnic accessory. $2.99 


# k Console HTML- | CSS Script DOM Net PageSpeed Page Speed Activity YSlow jooo 
ÈB | Edit td < tr < tbody < table < body < html Style | Computed Layout DOM 
Y <html> element.style { 
> <head> border: 2px dotted red; 
Y <body> } 
Y <table> 
Y <tbody> 
P <tr> 
Y <tr> 


<td>The most absorbent paper towels. </td> 
«td» $18.99 </td> 
</tr> 
> <tr> 
P <tr> "n 
bor 


图 3-13 ”选择 需 匹 配 包 含 “Paper Towels” 字 符 串 的 td 成功 并 设置 样式 后 的 浏览 器 输出 
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3.3 ”根据 元 素 的 属性 在 DOM 中 选取 元 素 


标签 属性 用 来 记录 标签 的 附加 信息 ， 或 者 用 于 和 JavaScript 交 互 。 比 如 很 常见 的 HTML 标签 


<a>， 它 就 可 以 有 href、rel、id、class、title、href 


lang 等 属性 。 在 表单 中 通过 属性 选取 


表单 项 是 很 好 的 做 法 ， 因 为 我 们 可 以 通过 名 称 、 类 型 、 属 性 、 类 、ID 等 检索 元 素 。 


表 3-3 中 的 各 种 属性 选择 需 均 可 用 于 从 DOM 中 选取 元 素 。 本 书后 面 会 通过 一 个 较 复 杂 的 案例 


详细 讲解 属性 ， 现 在 我 准备 了 两 个 常见 的 例子 来 说 明 属性 选择 器 的 用 法 。 
表 3-3 ”属性 名 字 及 其 功能 


属 性 名 属性 功能 

$ (' Lattribute*-value]') 若 value 是 目标 属性 的 值 的 一 部 分 ， 则 匹配 成 功 ( * 表 示 
通 配 ) 

$(' [attribute|-value]') 目标 属性 的 值 等 于 value 或 者 以 value 开 头 且 其 后 紧 跟 

一 个 连 字符 〈- ) 

$(' [attribute~=value] ') 目标 属性 的 值 包含 value 中 的 任意 一 个 子 串 (value 是 这 
样 一 个 字符 串 ， 它 由 多 个 子 串 组 成 ， 子 串 之 间 由 空格 分 隔 ) 

$('[attribute$-value]') 目标 属性 的 值 以 value 结 束 

$('[attribute-value]') 目标 属性 的 值 等 于 value 

$(' [attribute*=value] ') 目标 属性 的 值 以 value 开 始 

$('[attribute!=value]') 目标 属性 的 值 不 等 于 value 

$(' [attribute=value] [attribute=value] 目标 元 素 同 时 匹配 多 个 属性 及 其 值 


[attribute=value] ') 


3.3.1 选择 包含 某 个 网 站 地 址 的 链接 


通配符 * 是 一 个 灵活 又 常用 的 属性 选择 豆 ， 用 来 在 整个 DOM 中 搜索 包含 特定 属性 值 的 元 素 。 


这 个 选择 器 非常 快 : 如 果 你 打算 用 一 双 肉 眼 找 出 这 些 元 素 ，; 
性 选择 器 ， 得 到 同样 的 结果 只 需要 几 秒 钟 。 


伯 要 花 上 几 个 小 时 ， 而 使 用 通配符 属 


在 下 面 这 个 例子 中 , 我 要 在 所 有 的 链接 中 找 出 href 属 性 中 包含 google.com 域 名 的 那些 ， 然 后 


给 它们 添加 一 个 CSS 类 ( 为 链接 加 上 一 个 小 型 谷歌 图 标 )。 
的 链接 ,然后 调用 addclass () 方 法 添加 .google-icon 类 。 
并 设置 样式 后 的 效果 。 

<!doctype html> 

«html» 


«head» 
<style> 


我 先 找 出 那些 href 中 包含 google.com 
图 3-14 展 示 的 是 这 个 选择 需 匹 配 成 功 


.google-icon (background:url(images/google icon.jpg) no-repeat;padding:0px 


30px; } 
</style> 


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
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</script> 


<script> 
ready(function () { 


$ (document). 
$('ul li a[href*-"google.com"]') 'google-icon'); 


.addClass( 


1); 


«/script» 


«ul» 


«body» 
<li><a href-http://www.google.com/analytics»Google Analytics«/a»«/li» 
<li><a href-"http://www.yahoo.com/sports"»Yahoo Sports</a></li> 


</ul> 
</body> 
</html> 
0 00 Mozilla Firefox 
{ 4 M" pb)” MG ( 会 aD http:/ /smashingjquery.com/code/chap04/example4-14.html wW v) iG TE Google a) &* 
e: Disable + Æ Cookies + |) CSS + E] Forms + M Images + @ Information + © Miscellaneous + ./ Outline + 22 Resize + gP Tools » £>) View Source * > Options 
| C) http://smashing...xample4-14.mtmi JT = 


e 28 Google Analytics 
* Yahoo Sports 


e260 


Style ~ 


$* 
body - html 
This ele t has no styl 


Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity — YSlow 
Computed Layout DOM 


Y ài 
a class-"google-icon" href="http://ww. google.com 
/analytics"» Google Analytics </a: 
</li> 
> <li> 
</ul> 


</body> 
</html> 
4 BBA 26.5k 0375s 


E Done 
图 3-14 ”匹配 href 中 包含 google.com 域 的 链接 并 设置 样式 后 的 浏览 器 输出 


择 属 性 值 以 茶 个 单词 结尾 的 元 素 


3.8.2 i 
类 似 于 在 属性 过 滤 中 使 用 通配符 ， 我 们 可 以 用 美元 符号 C$) 选取 属性 值 以 某 个 字符 串 结 


的 元 素 。 在 下 面 这 个 例子 中 ， 我 有 4 个 aiv 元 素 ， 这 4 个 元 素 的 了 属性 都 不 相同 ， 但 我 想 为 它们 加 
上 同一 个 类 , 好 在 这 里 所 有 div 元 素 的 id 均 以 bird 这 个 单词 结尾 ,所 以 我 可 以 用 属性 选择 器 利用 


这 个 单词 选取 元 素 。 图 3-15 展 示 的 是 匹配 pird 成 功 并 设 定 样式 之 后 的 浏览 器 输出 。 
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<!doctype html» 
«html» 
«head» 
«style» 
.bird {border:1px solid #ccc;width:200px;margin: 5px; } 
«/style» 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
$ (document) . ready (function () { 
s('div[ids="bird"] ') .addClass ('bird'); 
1); 
</script> 
<body> 


<div 
<div 
<div 
<div 


id="red-bird"></div> 
id="blue-bird"></div> 
id="green-bird"></div> 
id="black-bird"></div> 


</body> 
</html> 


AANA Mozilla Firefox = 
WY he (e Çx ) (会) @ http://smashingjquery.com/code/chap04/example4-15.html Wy) Qe Googie Q) fer 
@ Disable > Æ Cookies + 器 CSS * 回 Forms + / Images + @ Information » C Miscellaneous + / Outline + $$ Resize » j^ Tools + $>) View Source + £> Options 
| D) http://smashing...xample4-15.htmi [3E = 
red 
blue 
green 
black 
+ Uy Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow ( )eeo 
k8 Edit body html Style» | Computed Layout DOM 
v 
<html> This element has no style rules. 
b <head> 
"ENS 
«div ide"red-bird" class="bird"> red </div> 
«div ide"blue-bird" class="bird"> blue </div> 
<div ide"green-bird" class="bird"> green </div> 
<div ide"black-bird" class="bird"> black </div> 
</body> 
</html> 
E Done m BBA 25.1k o365s A 


图 3-15 ”匹配 pizdq 成 功 并 设置 样式 之 后 的 浏览 器 输出 
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3.33 用 jQuery 操作 HTML 和 CSS 


学 会 使 用 选择 器 在 DOM 中 漫游 是 成 功 理解 jQuery 的 第 一 步 。 不 过 , 选取 一 个 元 素 之 后 ,总 要 
对 它们 做 点 什么 ， 比 如 添加 、 删 除 、 克 隆 、 和 替换 或 者 设置 样式 。 由 于 我 可 以 假定 选择 器 会 返回 一 
个 元 素 ， 在 后 面 我 会 把 选中 的 元 素 称 为 结果 集 。 

使 用 jQuery 的 乐趣 自 操 作 DOM 开 始 。 我 们 已 经 了 解 了 几 种 为 DOM 设 置 CSS 属 性 的 方法 ， 接 
下 来 我 们 准备 走 得 更 远 一 点 ， 了 解 如 何 真正 地 定制 一 个 页 面 。 

如 果 你 可 以 熟练 使 用 原生 JavaScript 函 数 操作 DOM， 就 会 惊讶 地 发 现 使 用 jQuery 代码 更 少 ， 
却 能 做 得 更 好 并 且 其 语法 更 容易 理解 。 

类 似 于 操作 页 面 中 的 HTML 元 素 ， 我 们 也 能 够 操作 页 面 内 容 。 


3.3.4 添加、 删除 、 克 隆 及 替换 DOM 元 素 或 内 容 


在 DOM 中 添加 、 删 除 、 蔡 换 、 克 隆 元 素 及 其 内 容 是 jQuery 的 拿手 好 戏 。 举 个 例子 ,在 某 个 公 
司 我 需要 改变 页 面 中 的 某 些 HTML， 只 好 找到 做 后 端 开发 的 某 位 程序 员 ， 由 他 先 修改 编译 后 端的 
代码 ， 然 后 用 户 才能 看 到 改变 后 的 HTML。 这 要 花 很 多 时 间 ， 尤 其 不 适合 只 需要 做 一 点 点 修改 的 
情况 。 这 是 JavaScript 擅 长 的 领域 。 在 一 个 生产 服务 器 上 更 新 JavaScript 文 件 要 比 上 传 页 面 模板 、 
修改 配置 文件 等 方便 得 多 。 
我 可 以 (独立 地 ) 使 用 jQuery 和 CSS 操 作 DOM， 这 要 比 麻烦 一 个 后 端 程序 员 快 得 多 。 下 面 这 
个 例子 展示 了 使 用 jQuery 操作 DOM 的 一 些 常 用 技术 。 
1. 向 DOM 中 添加 HTML 
shtml () 方 法 内 部 使 用 了 原生 的 innerHTML 属 性 ， 它 既 能 直接 调用 .html () 方 法 获取 某 个 元 
素 内 的 HTML 文 本 ， 又 可 以 传递 HTML 代 码 参 数 给 .html () 方 法 以 设 定 其 内 部 的 HTML。 
你 必须 清楚 地 明白 .html () 方 法 抓 取 目标 元 素 内 的 全 部 DOM 元 素 。 图 3-16 展 示 的 是 在 DOM 
加 载 完成 ，.html () 方 法 执行 之 后 的 浏览 需 输 出 。 
<!doctype html» 
«html» 
«head» 
«script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
«/script» 
«script» 
$(document).ready(function() ( 
$('.content').html('«div class="main">Hello jQuery.</div>'); 


1); 


«/script» 


«body» 
«div class="content"> 
<p>I run 4 times a week.</p> 
«p»I lift weights 3 times a week.«/p» 
«/div» 
«/body» 
«/html» 
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Mozilla Firefox 


(*)52- (GJ) & Gf) CL f http://smashingjquery.com/code/chap04/example4-16.html Xv) Gi Google Q) fe: 


@ Disable * Æ Cookies + 器 CSS + 回 Forms + ($ Images * @ Information + C Miscellaneous * 37 Outline + 2; Resize + g” Tools + $2) View Source * +> Options 
In http:/ /smashing...xample4-16.html + ww 


Hello jQuery. 


xx Console HTML | CSS Script DOM Net Page Speed Page Speed Activity — YSlow ( eco 
i$ : Edit body html Style» | Computed Layout DOM 
v 
dias This element has no style rules 
> <head> 


| 
<div class="content"> 


<div class="main"> Hello jQuery. </div> 
</div> 
</body> 
</html> 


luz Done # Wa ^ 25.0k 0.5585 J 


图 3-16 DOM 加 载 完 成 之 后 ，.html () 方 法 执行 之 后 的 浏览 器 输出 


2. 设置 DOM 元 素 文本 

.text () 方 法 和 .html () 方 法 非常 相似 ， 只 不 过 它 仅 抓 取 匹配 元 素 内 的 字符 串 形式 的 文本 。 
它 的 工作 方式 也 和 .html () 方 法 相同 : 没有 参数 时 获取 元 素 文本 ， 提 供 参数 时 设 定 元 素 文本 。 我 
们 只 能 以 字符 串 的 形式 传递 文本 参数 给 .text () ， 不 能 是 HTML 代 码 。 

$('.content').text('Testing 1 2 3.'); 


3. 在 一 个 元 素 内 追加 或 在 其 最 前 面 插入 HTML 

如 果 你 打算 在 某 个 元 素 内 添加 一 些 HTML, 可 以 使 用 .append () 方 法 将 它 追 加 到 目标 元 素 内 
容 之 后 , 也 可 以 用 .prepena () 方 法 将 它 插入 到 目标 元 素 内 容 之 前 。.prepend () 方 法 总 是 将 参数 
插入 到 目标 元 素 内 第 一 个 子 元 素 之 前 , 而 .append() 则 总 是 将 参数 追加 到 目标 元 素 内 最 后 一 个 子 
元 素 之 后 。 图 3-17 展 示 的 是 为 .content 元 素 追 加 内 容 之 后 浏览 器 的 显示 情况 。 

<!doctype html» 

«html» 

«head» 


«style» 
.google-icon {background:url (images/google-icon.gif)no-repeat; } 


</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
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$ (document) .ready(function() { 
$('.content').append('<p>I ride my bike 3 times a week.</p>'); 


1); 


«/script» 


«body» 
«div class="content"> 
<p>I run 4 times a week.</p> 
«p»I lift weights 3 times a week.«/p» 
«/div» 
</body> 
</html> 


Mozilla Firefox 


Q) fer 


(4)>)- (€) Cx) AY) QW Coogle 

Api” Ed) he wr) Gl 

@ Disable + Æ Cookies + |) CSS + ©] Forms + i Images * @ Information + ' / Miscellaneous + -7 Outline + ŽŽ Resize + gP Tools + $) View Source + 4» Options 
] 口 napyrsmashino _xample4-17html [EF = 


(tr) “E http: //smashingjquery.com/code/chap04/example4-17.htm! 


Trun 4 times a week. 
I lift weights 3 times a week. 


Iride my bike 3 times a week. 


E Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 
k3 | Edit body html Stylev | Computed Layout DOM 


V <html> 


> <head> 
"Eccc-—————— | 
«div class="content"> 


<p>I run 4 times a week. </p> 
<p>I lift weights 3 times a week. </p> 
<p>I ride my bike 3 times a week. </p> 
</div> 
</body> 
</html> 


This element has no style rules. 


EE http://smashinajquery.com/code/chap04/example4-17.html 4 Wa^ 25.1K 0.4495 


图 3-17 为 .content 类 对 应 的 元 素 追 加 内 容 之 后 浏览 器 的 输出 


4. 在 DOM 某 个 元 素 之 前 或 之 后 添加 HTML 
.before() 和 .after() 方 法 与 .append() 和 .prepend() 方 法 非常 相似 。 它 们 的 区 别 主要 在 


于 HTML 的 插入 位 置 。.before() 和 .after() 并 不 把 HTML 插 入 到 目标 元 素 内 部 ,而 是 将 HTML 
插入 到 目标 元 素 之 前 或 之 后 。 图 3-18 展 示 的 是 将 HTML 插 入 到 .content 元 素 之 后 浏览 器 的 输出 。 


<!doctype html» 
«html» 
«head» 


«style» 
.google-icon (background:url(images/google-icon.gif)no-repeat;) 
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</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'> 
</script> 
<script> 
$ (document) .ready(function() { 
$('.content').after('«p»I ride my bike 3 times a week.</p>'); 
1); 


«/script» 


«body» 
«div class="content"> 
<p>I run 4 times a week.</p> 
<p>I lift weights 3 times a week.</p> 


</div> 
</body> 
</html> 
Ano Mozilla Firefox 
(«)72- (€) Cx) Cf) aD» http://smashingjquery.com/code/chap04/example4-18.html wr) Gar OO a) ied: 


Disable * Cookies * |. CSS + [7] Forms + |i Images + Information * Miscellaneous * 27 Outline + 5 © Resize + g” Tools * View Source + Options 
ta [4 


In http://smashing...xample4-18.html | + = 


Irun 4 times a week. 
I lift weights 3 times a week. 


Iride my bike 3 times a week. 


# ~~ Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 
ÈB | Edit © body < html Style» | Computed Layout DOM 
Y 
rid This element has no style rules. 
> <head> 


| es) 
<div class="content"> 


<p>I run 4 times a week. </p> 
<p>I lift weights 3 times a week. </p> 
</div> 
<p>I ride my bike 3 times a week. </p> 
</body> 
</html> 


luz Done # BBA 251K 09255 / 
图 3-18 把 HTML 插 入 到 .content 类 对 应 元 素 之 后 浏览 器 的 输出 


5. 从 DOM 中 删除 HTML 元 素 

.remove () 方 法 用 来 从 DOM 中 删除 元 素 。 作 为 一 名 Web 设 计 师 ， 我 倾向 于 通过 CSS 隐 藏 这 些 
元 素 ， 不 过 你 也 可 以 使 用 .remove () 方 法 将 这 些 元 素 从 页 面 中 彻底 删除 。 

文 个 方法 的 使 用 非常 简单 ， 只 需要 在 目标 元 素 上 调用 .remove () 方 法 。 当 DOM 加 载 完 成 之 
后 ， 这 个 元 素 就 会 被 删除 。 我 们 也 可 以 为 .remove () 方 法 指定 一 个 选择 器 (后代 选择 器 ) 参数 ， 


M 
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这 样 就 只 有 目标 元 素 内 匹配 该 选择 器 的 后 代 元 素 被 删除 。 
下 面 这 个 例子 展示 了 .remove () 方 法 的 工作 方式 。 参 考 图 3-17 可 以 看 到 该 元 素 已 经 被 从 DOM 
中 删除 。 图 3-19 展 示 的 是 .content 元 素 被 删除 之 后 浏览 器 的 输出 。 


<!doctype html> 
«html» 
«head» 
«style» 
.google-icon (background:url(images/google-icon.gif)no-repeat;) 
«/style» EET 
<script src-'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'» 
«/script» 
<script> 
$ (document) . ready (function() { 
$('.content').remove(); 
1); 
«/script» 


«body» 
«div class="content"> 
<p>I run 4 times a week.</p> 
<p>I lift weights 3 times a week.</p> 


«/div» 
«/body» 
«/html» 
000 Mozilla Firefox = 
(1 J- CE (X Cf). CLIE hue:/smashingiquery.com/code/chap04/example4-19.html XY) GM Google Q) aa 


@ Disable ~ Æ Cookies + “J CSS + ©] Forms + W Images + @ Information + Miscellaneous + 4 Outline + ŠŠ Resize * gP Tools + $2) View Source » DD Options 
] [C http://smashing...xample4-19.html 


P "y Console  HTMLv | CSS Script DOM Net Page Speed Page Speed Activity — YSlow 人 EAL] 
k Edit body html Style» Computed Layout DOM 
Y <html> 


This element has no style rules. 
> <head> 
body> 
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图 3-19 .content 类 元 素 被 移 除 之 后 浏览 器 的 输出 
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6. 克隆 HTML 元 素 

有 时 候 我 们 需要 复制 DOM 中 的 某 个 元 素 , 然后 将 它 放 到 另 一 个 地 方 .jQuery 有 一 个 .clone 0 
方法 ， 它 负责 克隆 我 们 选中 的 任何 元 素 。 当 一 个 元 素 被 克隆 之 后 ， 我 们 就 可 以 使 用 .appenda () 
之 类 的 方法 将 克隆 的 元 素 放置 到 任何 地 方 ， 如 下 例 所 示 : 


$('.product').clone().append('.product'); 


3.8.5 在 jQuery 中 使 用 CSS 


jQuery 仿佛 总 是 与 CSS 协 同 工 作 。 我 常常 会 想 ， 如 果 没 了 jQuery， 我 可 该 怎么 活 ， 特 别 是 需 
要 在 脚本 中 密集 使 用 CSS 的 时 候 。 目前 为 止 , 我 大 都 使 用 .css () 方 法 为 示例 页 面 中 的 HTML 元 素 
添加 CSS 属 性 。 使 用 .css () 方 法 的 缺点 是 它 会 在 HTML 中 添加 内 艇 样式 。 如 果 你 更 喜欢 干 干净 净 
的 代码 ， 我 建议 改 用 添加 或 删除 样式 类 的 方式 。 

表 3-4 概 述 了 jQuery 中 所 有 可 用 的 CSS 方 法 。 


表 3-4 ”常用 CSS 方 法 及 其 功能 


方法 名 功 能 

.css() 获取 或 设 定 元 素 的 CSS 属 性 

.addClass () 添加 CSS 类 

.hasClass() 检查 元 素 是 否 拥有 某 个 类 

. removeClass () 删除 CSS 类 

. toggleClass () 切换 某 个 CSS 类 ( 没有 就 加 上 ， 有 就 删除 ) 


1. 为 DOM 元 素 设置 CSS 属 性 

如 果 你 是 顺序 阅读 本 章 的 话 , 就 会 对 为 DOM 元 素 设 定 CSS 样 式 很 熟悉 , 因为 我 在 每 一 个 示例 
里 都 使 用 了 .css() 方 法 。 这 是 一 个 非常 有 用 的 方法 ,特别 是 在 调试 布局 时 ( 为 解决 难 缠 的 布局 
问题 ， 常 党 不 得 不 为 某 些 元 素 加 上 边框 进行 调试 )。 

$('.container').css('border','lpx solid #333'); 

2. 为 DOM 元 素 添加 类 

如 果 需 要 为 某 个 DOM 元 素 添 加 一 个 类 ， 就 用 .aqaclass () 方 法 。 只 要 把 类 的 名 字 作为 参数 
传递 给 这 个 方法 就 可 以 了 。 不 过 记 住 ， 千 万 别 给 类 的 名 字 前 面 加 上 和 句点。 

$('.container').addClass('active'); 

如 果 目 标 元 素 原 来 已 经 有 一 个 类 ， 则 新 类 会 被 添加 到 该 类 之 后 。 如 果 需 要 一 次 添加 多 个 类 ， 
只 需要 用 空格 把 这 些 类 的 名 字 隔 开 作 为 参数 传人 。 

$('.container').addClass('active book') ; 
看 前 面 的 例子 , 不 要 错 以 为 只 能 为 选中 的 类 添加 类 , 完全 可 以 为 任意 选中 元 素 ( 如 ID 和 其 他 
HTML 标 签 ) 添加 类 : 
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$('tpage-wrap').addClass('alternate'); 

3. 为 DOM 元 素 删除 类 

当然 我 们 也 有 需要 为 元 素 删除 类 的 时 候 。 这 时 需 使 用 方法 .removeclass() ， 它 
和 .aqadaclass O 的 工作 方式 完全 相同 。 

$('tpage-wrap').removeClass('alternate'); 

如 果 没 有 为 这 个 方法 指定 参数 ， 则 目标 元 素 的 所 有 类 都 被 删除 。 

$('tpage-wrap').removeClass(); 

只 要 将 使 用 空格 分 开 的 多 个 类 名 字 作 为 参数 ， 就 可 以 为 目标 元 素 一 次 删除 多 个 类 : 

$('#page-wrap') .removeClass('alternate main product'); 


4. 让 DOM 元 素 切 换 类 

切换 就 是 让 某 个 东西 开 或 者 关 。 在 开发 动态 Web 应 用 时 ，.toggleclass () 方 法 非常 有 用 ， 
在 那些 场合 我 们 可 能 并 不 总 是 知道 当时 的 开 / 关 状 态 。 

在 下 面 的 示例 中 , 我 为 fpage-wrap div 元 素 切 换 .alternate 类 。 如果 div 元 素 没有 这 个 类 ， 
就 把 这 个 类 加 上 ， 反 之 就 把 这 个 类 去 掉 。 


$('#page-wrap') .toggleClass('alternate'); 


事 ff 


在 jQuery 中 处 理事 件 与 前 面 提 到 的 在 HTML 中 处 理 CSS 很 相似 ， 事 件 代 码 与 目标 元 素 互 相 分 
离 。 若 使 用 原生 JavaScript 代 码 ， 所 有 的 事件 都 直接 能 入 到 HTML 代码 中 , 这 时 维护 自 定 义 事件 代 
码 不 但 是 一 件 麻 烦 事 ， 而 且 很 容易 出 问题 。 "虽然 我 们 可 以 把 所 有 功能 函数 存 到 一 个 外 部 文件 当 
中 , 可 是 它们 的 调用 代码 却 是 以 内 散 JavaScript 的 形式 添加 到 元 素 标签 之 中 。 因此 一 旦 修改 了 某 个 
元 素 ， 就 不 得 不 更 新 有 关 的 所 有 元 素 。 使 用 jQuery， 选 定 元 素 和 事件 处 理 代码 与 DOM 彻 底 分 离 ， 
存放 于 外 部 的 JavaScript 文 件 当 中 。 

jQuery 支持 所 有 的 原生 JavaScript 事 件 ， 但 它 让 事件 处 理 与 Web 应 用 的 整合 更 加 容易 。 在 
本 章 中 , 我 们 将 一 起 使 用 jQuery API 研 究 这 些 事 件 ， 弄 清 它 们 如 何 工 作 ， 最 后 一 起 看 几 个 真实 
案例 。 


4.1 理解 jQuery 事件 


jQuery 事件 是 任何 Web 应 用 或 Web 页 面 的 基础 组 成 部 分 。 在 因特网 刚刚 兴起 的 时 候 ， 它 只 是 
一 些 静 态 文本 、 图 像 和 超 链 接 。 随 着 技术 不 断 进步 ,我 们 开始 看 到 越 来 越 多 的 动态 页 面 ， 它 们 由 
后 台数 据 库 驱 动 。 

随 着 后 端 技 术 越 来 越 先 进 ， 前 端 技术 也 在 不 断 改进 ， 以 Adobe Flash 和 JavaScript 为 首 的 这 些 
技术 为 页 面 添加 了 新 的 交互 层 。 超 链接 发 展 为 翻转 和 层次 菜单 , 图 片 则 演进 为 支持 修改 功能 的 网 
库 ， 项 态 文本 则 进化 为 强大 的 动态 搜索 引擎 〈 比如 Kayak 旅 行 搜 索引 擎 ， 它 提供 了 基于 地 图 的 视 
图 ， 见 图 4-1 )。jQuery 让 我 们 用 更 少 的 代码 ， 非 常 容易 理解 的 语法 ， 轻 松 地 应 用 所 有 的 原生 
JavaScript 事 件 捕 获 来 自用 户 键盘 和 鼠标 的 交互 。 这 正 是 jQuery 的 风格 ! 


CD 公平 地 说 ， 使 用 原生 JavaScript 也 可 以 做 到 JavaScript 代 码 与 HTML 代 码 分 离 。 
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oo Window Help 
KAYAK Search Results. 


]www.kayak.com/r/UEP3hV 


4 A v A v (REED ruens cars Deals vacations Cruises My Trips 


New York, NY Fri Aug 27 2010 - Tue Aug 31 2010 1 guest in 1 room 
9 2 2 ~ Tv 


@ Modify or start search over rn : 

@ Share results - LIVE Corn io 

窜 Get a hotel alert / 

Stars B 

CERET E] $327 

[. LEE $164 

[ 354 

Gee $59 j 

Location B 

@ Landmarks O Neighborhoods : 

{Any miles (e oat - —__— 
Filters Applied: Location [z] | 

F Show hotels in New York only ERE 

ding custom ddr Sort Featured Ù) Viewresults: List | Map | Photos @ add my pin @Distance from: New York (c 
8 $336+ InterContinental New York Times Squ... krtka details BO 0.5 mi 0 | 

Name Contains Qj $239+ ^ The Waldorf=Astoria® weeks details gO 08mi L 

Brands m Ẹ $242+ Radisson Lexington Hotel New York oes s details BO — 08mi : 
<Prev 12345... 19 Next» 

Price © 


NM in USD and inclu 
$48 $48 to $937 $937 | nigi 
[E 


C) Include hotels without prices 


图 4-1 在 Kayak 站 点 上 ， 在 事件 的 帮助 下 能 够 在 地 图 上 直观 地 预订 酒店 
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表 4-1 列 出 了 jQuery 常用 的 文档 和 窗口 事件 , 这 些 事件 相当 重要 , 在 jQuery 编程 中 要 牢记 在 心 。 
表 4-1 简 要 列 出 了 各 个 事件 及 其 功能 ， 既 便于 比较 ， 又 为 我 们 在 脚本 中 选择 最 合适 的 事件 提供 了 
参考 。 


表 4-1 jQuery 文档 和 窗口 事件 


事件 名 字 事件 功能 

ready () 当 HTML 文 档 加 载 完成 时 触发 

load() HTML 所 有 组 件 全 部 加 载 完 成 时 触发 

unload() 当 浏 览 器 窗口 关闭 或 用 户 单 击 一 个 新 链接 或 在 地 址 栏 输入 新 
网 址 即将 打开 一 个 新 页 面 时 触发 

resize() 24] RE Da ait Bad LK] NIST frt 

scroll () 当 用 户 滚动 窗口 时 触发 

error () 当 HTTP 请 求 遇 到 错误 时 和 触发 


4.2.1 使 用 .reaay() 事件 检测 DOM 是 否 完全 加 载 
人 们 常用 事件 .ready () 检 查 DOM 是 否 加 载 完毕 。 当 DOM 准 备 好 之 后 , 这 个 事件 将 触发 所 有 
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包 在 .ready() 事 件 处 理 函 数 中 的 JavaScript 或 jQuery 代码 。 

为 了 确保 只 有 DOM 准 备 好 之 后 才 执 行 我 们 的 jQuery 代码 ， 应 该 把 这 些 代码 放 入 .ready () 事 
件 处 理 函 数 , 无 论 是 HTML 内 髓 的 方式 还 是 外 部 文件 的 方式 都 没有 问题 。 事件 处 理 函 数 是 这 样 一 
种 函数 ， 它 和 事件 绑 定 在 一 起 ， 当 事件 发 生 时 就 会 被 触发 。 在 进行 任何 DOM 操 作 之 前 ， 使 用 文 
档 的 .*eaqy() 事 件 处 理 函 数 确保 DOM 完 全 加 载 非 常 重要 。 如 果 忘 记 使 用 这 个 事件 ， 代 码 很 有 可 
能 不 会 像 你 期 望 的 那样 工作 。 


$ (document) .ready() { 
alert("The DOM is ready"); 
1); 


用 这 个 事件 来 检测 DOM 完 全 加 载 再 好 不 过 ,不 过 它 并 不 等 待 页 面 的 小 部 件 ( 如 图 片 或 视频 ) 
成 功 加载 。 如 果 和 希望 检查 这 些小 部 件 是 否 加 载 完 成 , 可 以 使 用 下 面 案 例 中 的 jQuery. Load () 事件 。 


4.2.2 ”使 用 .1oaqd() 事 件 预 加 载 图 片 


预 加 载 图 片 相当 实用 。 当 页 面 上 有 很 多 图 片 时 ， 如 果 我 们 采用 了 预 加 载 技 术 ， 就 可 以 做 到 当 
用 户 在 页 面 上 执行 某 些 操作 时 这 些 图 片 已 经 就 绪 。 在 下 面 这 个 例子 中 ， 我 演示 了 如 何 预 加 载 5 张 
图 片 ， 并 在 它们 加 载 完 成 之 后 将 它们 插入 到 DOM 当 中 。 让 用 户 等 待 页 面 中 的 图 片 一 张 张 加 载 完 
毕 是 最 糟糕 的 用 户 体验 之 一 。 下 面 这 个 例子 有 效 地 避免 了 这 种 情况 。 

我 故意 使 用 了 较 大 的 图 片 ， 它 们 的 大 小 在 100 KB 到 200 KB 之 间 ， 并 没有 为 Web 应 用 做 优化 。 

() 我 使 用 原生 JavaScript 数 组 定义 了 一 个 名 为 imgarray 的 数组 。 这 个 数组 保存 着 我 打算 添加 
到 页 面 中 的 所 有 图 片 的 文件 名 。 使 用 这 个 数组 容器 , 我 能 轻松 地 把 它们 添加 到 页 面 中 ， 而 不 必 写 
5 条 语句 : 


var imgArray = 
["loc_portraitl.jpg", 
"loc_portrait2.jpg", 
"loc_portrait3.jpg", 
"loc_portrait4.jpg", 
"loc_portrait5.jpg"]; 


(2) 再 定义 两 个 变量 用 于 下 一 步 的 for 循 环 。 变量 imgArrLength 保 存 着 数组 的 长 度 ， 变 量 i 
用 作 for 循 环 的 循环 变量 。 只 要 不 是 关联 数组 ， 数 组 的 起 始 索引 就 总 是 0。 


var imgArrLength = imageArray.length; 


var i = 0; 

(3) 构建 一 个 for 循 环 ， 循 环 条 件 为 变量 i 小 于 imgarrLength。 这 个 for 循 环 将 一 直 运行 , E 
到 i 增长 到 数组 的 长 度 5 为 止 。 

for (i=0;i< imgArrLength ;i++) { 

} 

一 个 数组 的 索引 总 是 从 0 开始 , 因此 尽管 这 个 数组 一 共有 5 个 元 素 , 数组 的 最 大 索引 值 却 是 4。 
下 面 的 代码 展示 了 如 何 从 0 到 4 设置 数组 索引 : 
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imgArray[0] = "loc_portraitl.jpg"; 

imgArray[1] = "loc_portrait2.jpg"; 

imgArray[2] = "loc_portrait3.jpg"; 
[3] = "loc_portrait4.jpg"; 
[4] 


= "loc_portrait5.jpg"; 


imgArray 
imgArray 


(4) 在 循环 过 程 中 , 每 次 循环 添加 一 个 图 片 元 素 , EN attr OIAR Bü scc PERE 
图 片 文 件 名 ， 把 图 片 的 ia 设置 为 img 加 上 索引 编号 (如 idq="img1" )， 直 到 循环 结 


for (i20;i <= imgArrLength;i++) { 

$('<img />').attr({'src':'images/'+imgArray[i], 
'id':'img'+[i]}).load(function() { 

1): 
H 


(5) 每 当 一 个 图 片 加 载 完 成 ， 就 把 它 添加 到 DOM 的 .gallery 容 器。 图 片 只 有 被 添加 到 DOM B 
才 可 被 看 到 。 图 片 何 时 被 添加 到 DOM 取 决 于 它 的 加 载 时 间 。 注 意 ， 图 4-2 中 的 泻 染 完成 的 源 代 
码 中 图 片 文件 的 顺序 并 非 与 加 载 顺序 (imgarzay 中 的 文件 名 顺序 ) 相同 ， 而 基本 上 是 文件 大 
小 顺序 。 

for (i20;i <= imgArrLength;i++) ( 


$('«img /»').attr(('src':'images/'«imgArray[i], 'id':'img'+[i]}).load(function() { 
$('.gallery').append($(this)); 


Mozilla Firefox 


de (X2 Gf. LV http://smashingjquery.com/code/chap05/exampleS- 1.html wr 29x Google Qa) w- 
@ Disable + Æ Cookies + |. CSS + =] Forms + / Images + @ Information + “3 Miscellaneous * ./ Outline + 72 Resize * jP Tools * [2] View Source + 5» Options 


] C) http; /smashingj. .exampleS-1-htmi 


Hello jQuery. 


x "e Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 
k8 : Edit hl div.container body html Style» Computed Layout DOM 


TY <html> 

> <head> 

Y <body> 
V <div class="container"> 

V <div class= ootte s 

<img class-"img4" src-"images/loc. portrait5. jpg"> 
<img class-"imgü" src-"images/loc. portraitl.jpg"» 
<img class="img3" src-"images/loc. portrait4. jpg"» 
«img class-"imgl" src-"images/loc. portrait2.jpg"» 
"img?" src-"images/loc portrait3.jpg"» 


This element has no style rules. 


图 4-2 jQuery 成 功 预 加 载 图 片 后 ，Firebug 中 的 最 终 源 代码 输出 
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在 前 面 这 个 例子 中 ， 注 意 this 关 键 字 的 用 法 ， 在 这 里 它 是 正在 执行 的 方法 中 当前 处 理 对 象 
的 引用 。 this 关 键 字 在 这 里 引用 的 是 .special-offer 对 应 的 元 素 对 象 , 在 下 面 这 个 例子 中 , this 
关键 字 引 用 的 是 当前 正 被 处 理 的 <img> 标 签 对 应 的 元 素 对 象 。this 关 键 字 极为 有 用 , 它 在 不 同 的 
场合 有 不 同 的 含义 。 "图 4-3 演 示 的 是 this 关 键 字 如 何 工作 。 


S('.special-offer').bind('click' , function() { 
$(this).addClass('active'); 
1): 


图 4-3 ”this 关键 字 如 何 工作 


(6) 把 上 面 这 些 代码 片段 整合 起 来 ， 放 到 你 的 IDE (Integrated Development Environment， 集 
成 开发 环境 ) 当中 ， 就 得 到 以 下 代码 : 


<!doctype html» 
«html» 
«head» 
<script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
«/script» 
<script> 
var imgArray = 
["loc_portraitl.jpg", 
"Loc portrait2.jpg", 
"loc portrait3.jpg", 
"loc portrait4.jpg", 
"loc portrait5.jpg"]; 
var imgArrLength - imageArray.length; 
for (i=0;i<= imageArray.length;it++) { 
$('«img /»').attr('src', 'images/'+imageArray[i]) .load(function() { 
$('.gallery').append($(this)); 
1); 
} 
</script> 
<body> 
<hil>Hello jQuery.</h1> 
<div class="gallery"></div> 
</body> 
</html> 
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你 是 否 曾经 希望 在 用 户 离开 页 面 时 显示 一 些 内 容 ? 你 是 否 希 望 再 给 他 们 一 次 机 会 , 通过 提供 
一 些 难以 拒绝 的 东西 吸引 他 们 留 下 ? jQuery 的 unloag 事 件 适 合 做 这 样 的 事 。 当 用 户 单 击 浏览 器 的 
关闭 按钮 或 者 在 地 址 栏 里 输入 新 网 址 即将 打开 新 页 面 的 时 候 ，unloaq 事 件 就 会 发 生 。 你 可 能 遇 
到 过 这 样 的 网 站 , 在 你 打算 离开 时 ， 它 就 弹出 一 个 又 一 个 窗口 ， 不 让 你 关闭 页 面 , 是 的 ， 他 们 在 


O 译 者 曾 认真 整理 过 this 的 应 用 场景 ， 并 据 此 写 了 一 篇 博文 “JavaScript 中 七 种 函数 调用 方式 及 对 应 this 的 含义 ”， 
网 址 是 http://t.cn/hDpAfn， 欢 迎 有 兴趣 的 读者 阅读 。 
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滥用 unloaq 事 件 。 对 一 个 想 离开 的 用 户 来 说 ， 这 可 不 是 什么 正确 的 做 法 。 

不 过 ， 试 想 这 样 一 个 场景 : 一 个 人 正在 网 站 上 填写 一 张 表 单 , 刚刚 填写 到 一 半 ， 他 突然 打算 
放弃 。 这 是 使 用 unloaq 事 件 的 最 好 机 会 : 我 们 可 以 显示 一 条 提示 信息 ， 问 问 他 是 否 真 的 打算 离 
开 。 图 4-4 展 示 的 是 当 用 户 打算 离开 时 显示 的 一 条 提示 信息 。 


The page at http://smashingjquery.com says: 
A You have not finished filling out the form. Are you sure 


you want to leave 


Go 
Li 


图 4-4 在 用 户 打算 离开 页 面 时 显示 一 条 提示 信息 


unload 事 件 在 一 些 老式 浏览 器 中 不 能 正常 工作 。 在 任何 代码 上 线 之 前 , 我 们 都 应 该 进行 浏览 
器 测试 ， 确 保 这 一 事件 在 计划 文 持 的 所 有 浏览 器 中 都 能 正常 工作 。Safari 3 之 前 的 版 本 以 及 很 多 
Firefox 3 的 版 本 都 有 问题 一 一 在 关闭 页 面 时 有 可 能 不 会 触发 unloaq 事 件 , 因此 可 能 需要 为 这 些 较 
老 的 浏览 器 提供 一 种 替代 方案 。 

使 用 bind 方 法 绑 定 unloaq 事 件 处 理 函 数 。 


$ (window) .bind('unload', function() { 
alert ('You have not finished filling out the form. Are you sure you want to leave?' 


FNF 
$ (window) .bind('unload', function() { 
alert ('You have not finished filling out the form. Are you sure you want to leave' 


}) 
unload 事 件 绑 定 代码 可 以 简写 ， 代 码 示 例如 下 : 


$ (window) .unload(function() { 
alert ('You have not finished filling out the form. Are you sure you want to leave?' 
1); 
$(window).unload(function() ( 
alert('You have not finished filling out the form. Are you sure you want to leave' 


1); 


4.24 ”使 用 error 事 件 显 示 备 用 图 片 


我 同时 为 几 个 电子 商务 站 点 工作 , 每 个 站 点 约 销售 200 种 产品 , 考虑 到 每 种 产品 都 需要 3 个 不 
同 尺 寸 的 图 片 ( 缩 略图 、 小 图 、 大 图 )， 每 个 站 点 需要 约 600 张 产品 图 片 。 当 某 个 产品 页 某 个 图 片 
出 现 死 链 接 ， 除 非 正好 浏览 到 这 个 页 面 ， 否 则 我 无 法 知道 这 个 页 面 有 图 片 丢失 。 利 用 jQuery 的 
error 事 件 ， 我 就 能 检测 到 图 片 丢失 并 为 它 设置 一 张 默认 图 片 。 

D 首先 我 们 需要 添加 一 个 image 标 签 , 如 下 面 的 代码 般 简 单 即 可 。 记 着 给 这 个 标签 一 个 独 一 
无 二 的 ID， 以 方便 选中 它 。 

«img src="images/loc portrait10.jpg" id="portrait" /> 

(2) 接 下 来 ， 使 用 #portrait 选 择 需 选中 它 。 


$('#portrait') 
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(3) 为 上 一 步 选 中 的 图 片 添 加 erroz 事 件 处 理 函 数 。 当 浏览 器 无 法 正确 加 载 文件 时 会 触发 
error 事 件 。 


$('#portrait') .error(funtion() { 


1); 
(4) 最 后 ， 在 事件 处 理 函 数 中 添加 处 理 代 码 。 在 这 个 案例 中 ， 我 们 给 匹配 图 片 元 素 设置 一 张 
默认 图 片 的 src。 


$('#portrait').error(funtion () { 
$(this).attr('src', 'images/default.jpg'); 
1); 
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在 jQuery 中 , 事件 代理 是 指 : 把 事件 绑 定 到 父 级 元 素 , 然后 等 待 事件 通过 DOM 冒 泡 到 该 元 素 
时 再 执行 。 图 4-5 演 示 了 JavaScript 事 件 的 冒 泡 过 程 。 如 果 你 曾经 使 用 过 ActionScript 3.0， 就 会 很 熟 
悉 事件 冒 泡 的 概念 ， 因 为 在 jQuery 和 JavaScript 中 使 用 的 是 类 似 的 事件 处 理 方 式 。 在 事件 侦 听 过 程 
中 有 两 种 触发 事件 的 方式 : 事件 捕获 和 事件 冒 泡 。 


<div> 


图 4-5 事件 冒 泡 演示 


事件 捕获 过 程 是 指 事件 在 DOM 中 向 后 代 元 素 下 沉 。 事 件 冒 泡 则 是 指 事件 从 发 生 事件 的 源 元 
素 通过 DOM 向 上 冒 泡 。 除 focus 和 blur 事 件 之 外 的 绝 大 多 数 事件 都 会 冒 泡 。 事件 捕获 和 事件 冒 泡 的 
不 同 在 于 传递 方向 相反 ,事实 上 事件 冒 泡 更 快 , 效率 更 高 。jQuery 使 用 事件 冒 泡 的 方式 处 理 所 有 
事件 。 

事件 处 理 函 数 里 面 存放 着 事件 发 生 时 我 们 打算 执行 的 代码 。 我 们 使 用 某 个 jQuery 方法 把 事件 
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处 理 函 数 绑 定 到 事件 。 自 jQuery 1.4.2 起 ，jQuery 库 提供 了 3 个 方法 来 绑 定 元 素 的 事件 处 理 函 数 ， 


它们 分 别 是 binda() live( 和 delegate()。 


4.3.1 使 用 .bina() 绑 定 事 件 处 理 函 数 


绑 定 事件 处 理 函 数 的 最 基本 的 方式 是 使 用 .pind() 方 法 。 具 体 的 用 法 是 使 用 选择 器 选中 一 些 
元 素 ， 然 后 对 结果 集 应 用 .bina() 方 法 ,并 提供 必需 的 两 个 参数 ， 第 一 个 是 事件 类 型 ,第 二 个 是 


事件 处 理 函 数 。 


.bind(event type, event handler) 


在 下 面 这 个 例子 中 , 我 们 使 用 .pina() 方 法 为 所 有 .mylink 元 素 绑 定 了 click 事 件 处 理 函 数 。 


当 click 事 件 发 后 时 ， 会 自动 调用 alLertMe 国 数 : 


$ (document) . ready (function(){ 
$('.mylink').bind('click', alertMe) ; 


function alertMe() { 
alert ("Hello World"); 

} 

1); 


事件 处 理 函 数 也 可 以 是 匿名 函数 , 而 且 这 正 是 我 绑 定 事件 处 理 函 数 的 主要 方式 。 下 面 的 代码 
做 的 事情 和 上 面 的 例子 完全 相同 , 不 过 它 使 用 的 是 匿名 函数 ， 而 非 事先 定义 好 一 个 具名 函数 。 匿 
名 函数 ,又 叫 函 数字 面 量 , 特别 适用 于 一 段 代 码 只 在 某 具 体 上 下 文 环境 执行 的 场合 。 如 果 多 个 事 


件 都 需要 执行 同一 段 代 码 ， 则 最 好 使 用 具名 函数 。 


$ (document) . ready (function() { 
$('.mylink').bind('click', function() { 
alert("Hello World"); 
1); 
E: 


.pind() 方 法 仅 适 用 于 为 DOM 中 已 经 存在 的 元 素 绑 定 事件 
处 理 函 数 。 设 想 这 样 的 场景 : 在 DOM 中 有 一 个 .box 元 素 ， 你 硕 
望 某 个 链接 在 每 次 被 单 击 时 复制 这 个 元 素 ， 并 把 它 添加 到 DOM 
中 。 我 们 可 以 为 这 个 链接 绑 定 一 个 适当 的 click 事 件 处 理 函 数 。 
每 单 击 这 个 链接 一 次 ，.clone () 方 法 就 会 调用 一 次 ， 复 制 box 元 
素 并 将 它 追 加 到 .container 容 器 中 。 下 面 的 代码 演示 了 当 DOM 
准备 好 之 后 ， 如 何 使 用 click 事 件 在 DOM 中 改变 或 追加 元 素 : 


$ (document) .ready (function(){ 

$('.box').bind('click', function() { 
$(this).clone().appendTo('.container); 

1): 

Js 

«div class="container"> 
«div class="box"></div> 

«/div» 
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4.3.2 使 用 .1Live() 绑 定 事 件 处 理 函 数 


.1ive() 方 法 提供 了 一 种 相当 灵活 的 捕获 事件 的 方式 。 它 的 用 法 与 .bindq() 极 为 相似 : 也 是 
先 使 用 一 个 选择 器 选中 目标 元 素 ， 然 后 在 其 上 应 用 .1ive() 方 法 。 它 同样 需要 两 个 参数 ， 一 个 是 
事件 类 型 ,一 个 是 事件 处 理 函数 。 了 唯一 的 不 同 点 在 于 .1ive() 方 法 不 仅 作 用 于 DOM 中 当前 存在 
的 元 素 ， 还 作用 于 将 来 可 能 存在 ( 动态 生成 ) 的 元 素 。 

.live(event type, event handler) 

我 们 对 上 面 的 例子 稍 做 修改 ， 改 用 .1ive () 方 法 绑 定 click 事 件 到 所 有 的 元 素 ， 现 有 的 及 后 
续 克 隆 出 来 的 元 素 ， 都 将 支持 单 击 事件 。 


$ (document) .ready (function()f{ 

$('.box').live('click', function() { 
$(this).clone().appendTo('.container'); 

1); 

1); 

«div class="container"> 
«div class="box"></div> 

«/div» 


对 那些 需要 经 常 在 DOM 中 动态 添加 或 删除 元 素 的 Web 应 用 来 说 ,.1ive() 方 法 实在 是 好 用 极 
了 。 这 就 是 DOM 编 程 。 

用 .1ive() 方 法 绑 定 事件 的 缺点 是 ， 它 不 支持 下 面 代码 示例 所 示 的 链接 调用 方式 。 这 个 代码 
无 法 如 你 期 望 的 那样 工作 ! 7 

$ (document) .ready (function(){ 


$('.container').first().live('click',function() { 
$(this).clone().addClass('square').appendTo('.container:first'); 


Hb 
1); 


«div class="container"> 
«div class="box"></div> 

«/div» 

«div class="container"> 
«div class="box"></div> 

«/div» 

«div class="container"> 
«div class="box"></div> 

«/div» 


4.8.8 使 用 .aelegate() 绑 定 事件 处 理 函 数 


要 是 能 像 . Live () 方 法 那样 绑 定 事件 ,又 支持 链 式 调 用 其 他 方法 , 那 该 多 好 啊 ! .delegate() 
方法 即 是 最 佳 解决 方案 ， 它 非常 灵活 。 它 需要 3 个 参数 ， 第 一 个 是 选择 器 ， 第 二 个 是 事件 类 型 ， 


O jQuery 1.7 启 用 了 新 的 .on () 方 法 来 绑 定 事件 , 完美 地 解决 了 这 个 问题 。http:/tlava.cn/w/17823 上 有 个 简单 的 介绍 。 
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第 三 个 是 事件 处 理 函 数 。 它 会 将 事件 处 理 函 数 绑 定 到 选择 器 参数 匹配 的 元 素 上 。 传 递 
给 .delegate() 方 法 的 选择 器 参数 用 来 找 出 具体 的 目标 元 素 ( 或 目标 元 素 集合 )。 

.delegate(selector, event type, event handler) 

.delegate() 方 法 和 .bind() 及 .live() 的 用 法 稍 有 不 同 ， 具 体 如 下 : 

(1) 使 用 选择 器 选中 目标 元 素 ， 在 本 例 中 ， 目 标 元 素 是 一 个 容器 ; 

$('.container') 

(2) 接 下 来 用 .delegate() 方 法 绑 定 事件 。 我 在 .container 元 素 中 找 出 相册 封面 元 素 .box。 
然后 ， 每 单 击 一 次 ， 事件 处 理 程序 就 克隆 当前 的 box 元 素 并 将 它 追 加 到 .container 元 素 中 。 

$ (document) .ready (function(){ 

$('.container').delegate('.box','click',function() ( 
$(this).clone().appendTo('.container'); 


1); 
} 


下 面 这 个 示例 演示 了 .delegate 0 如何 支持 链 式 调用 。 
本 示例 与 前 面 那个 示例 的 不 同 之 处 在 于 ,我 先 使 用 .first () 方 法 匹配 了 .genre 元 素 ， 然 后 
才 调 用 .delegate()。 结 果 是 只 有 第 一 个 .genre 元 素 中 的 album-cover 元 素 可 以 单 击 ， 并 在 被 
单 击 时 将 自身 克隆 并 追加 到 .genre:first 容 器 。 
$ (document) .ready (function(){ 
$('.genre').first().delegate('.album-cover','click',function() { 
$(this).clone().addClass('rock').appendTo('.genre:first'); 


1); 
} 


<div class="genre"> 

<div class="album-cover"></div> 
</div> 
<div class="genre"> 

<div class="album-cover"></div> 
</div> 
<div class="genre"> 

<div class="album-cover"></div> 
</div 


4.4 捕获 鼠标 事件 


当 我 们 准备 好 在 站 点 中 添加 用 户 交 互 功能 时 , 会 发 现 jQuery 提 
供 了 各 种 鼠标 事件 , 它们 容易 学 习 , 而 且 可 以 轻易 通过 种 种 手段 扩 
展 ， 足 以 推动 Web 网 站 或 应 用 的 水 平 并 使 之 更 上 一 个 台阶 。 

.bind() 方 法 是 jQuery 中 绑 定 事件 处 理 函 数 的 最 常用 方法 ,我 
会 在 接 下 来 的 示例 中 使 用 它 。 


[] O jQuery OO LU 
加 加 OOOOUOO 
E O c o eye (0 (o ol O o 
BIS REA |e 
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表 4-2 是 鼠标 事件 及 其 功能 的 一 览 表 ， 表 格 之 后 是 应 用 这 些 事 件 的 一 些 实际 案例 ， 其 中 大 多 
数 案例 体现 了 前 面 各 章 介 绍 的 一 些 基本 概念 。 


表 4-2 jQuery 中 可 以 用 .binda() 方 法 绑 定 的 鼠标 驱动 事件 。 


人 人 
Click 单 击 鼠标 并 释放 将 触发 此 事件 
dblclick 双击 鼠标 触发 此 事件 
mousedown 鼠标 被 按 下 那 一 刻 触 发 此 事件 
mouseup ( 鼠标 按 下 后 ) 松 开 那 一 刻 触 发 此 事件 
mouseenter 鼠标 进入 某 一 元 素 区 域 时 触发 此 事件 
mouseleave 鼠标 离开 某 一 元 素 区 域 时 触发 此 事件 
mousemove 鼠标 在 某 一 元 素 区 域内 移动 时 触发 此 事件 
mouseout 鼠标 离开 某 一 元 素 及 其 父 元 素 时 触发 此 事件 
mouseover 鼠标 进入 某 一 元 素 及 其 父 元 素 时 触发 此 事件 


4.4.1 通过 单 击 鼠 标 触 发 添加 或 删除 页 面 内 容 的 行为 


学 习 如 何 检测 鼠标 单 击 是 jQuery 中 非常 重要 也 非常 热门 的 一 个 基本 事件 。 因 特 网 上 链接 和 文 
本 是 很 重要 的 内 容 , 用 户 自 然 期 望 在 你 的 站 点 上 能 到 处 单 击 。 能 够 通过 编程 动态 添加 或 删除 页 面 
内 容 非 常 有 用 ， 尤 其 是 需要 创建 Web 应 用 时 。 

如 果 使 用 原生 JavaScript 创 建 一 个 click 事 件 ， 我 们 需要 直接 在 元 素 上 应 用 onclick 动 作 。 这 
里 的 onclick 即 事件 处 理 函 数 ， 它 在 发 生 鼠 标 单 击 动作 时 调用 一 个 函数 。 这 种 技术 的 缺点 在 于 我 
们 不 得 不 把 事件 处 理 函 数 添加 到 具体 的 元 素 上 , 并 到 处 散人 入 JavaScript 行 为 代码 , 这 真是 一 团 糟 !。 
而 jQuery 则 只 需要 选中 打算 添加 click 事 件 的 元 素 。 和 能 人 JavaScript 会 导致 非 语义 的 代码 ， 就 像 下 
面 这 个 例子 一 样 〈 坏 习惯 ): 

<a href="product.html" onClick="myFunction();">Paper Towels</a> 

jQuery 则 是 先 选 中 打算 添加 click 事 件 的 元 素 , 然后 调用 .pind() 方 法 绑 定 事件 .jQuery 中 绑 
定 click 事 件 处 理 函 数 的 语法 更 简洁 ， 并 且 不 必 在 每 个 单独 的 元 素 标签 中 能 入 代码 。 


$(selector).bind('click', function() { 
// 元 素 被 单 击 后 要 执行 的 代码 
1); 


VA PER; FR P8] Y fog aii zs 9f: Bes aS — AE o 

(1) 首先 ， 创 建 一 个 .content-1Link 链 接 和 一 个 包含 一 些 内 容 的 div 元素 ， 在 加 载 页 面 时 这 
些 内 容 默认 是 隐藏 的 。 

<style> 

.content {display:none; } 


</style> 
<hil>Hello jQuery.</h1> 


H 
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<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida rhoncus 
commodo. Aenean sit amet augue iaculis sem consectetur accumsan vitae a arcu. Quisque 
quam diam, sollicitudin vel porta eget, vestibulum id justo. Vestibulum mattis metus 
sed lorem adipiscing facilisis. </p> 

<a href="#" class="content-link">Show More</a> 


<div id="content"> 

<p>Donec diam nisi, auctor sed tristique eget, pellentesque nec nisi. Sed vel libero 
ipsum. Quisque semper, lectus in pulvinar tristique, nibh urna scelerisque augue, at 
varius justo metus in orci. Suspendisse pretium arcu nec enim lacinia id cursus diam 
rhoncus. Praesent pulvinar volutpat luctus. Vivamus cursus adipiscing tellus, id 
fermentum turpis egestas lacinia. Aliquam tristique porttitor quam at pretium.</p> 
</div> 


(2) 选中 .content-1Link 链 接 ， 然 后 为 其 绑 定 click 事 件 处 理 函 数 0。click 事 件 绑 定 在 这 个 
链接 上 ， 当 click 事 件 发 生 时 ， 就 会 自动 执行 下 面 代码 中 大 括号 括 起 来 的 部 分 。 


$('.content-link').bind('click', function() { 


// click 事 件 发 生 ， 就 会 执行 这 里 的 代码 


2); 
(3) 要 在 该 链接 被 单 击 后 显示 原来 隐藏 的 内 容 ， 我 们 需要 先 选 中 这 个 aiv #content， 然 后 调 
用 .show() 方 法 。 

如 果 目 标 元 素 不 可 见 , .show() 方 法 就 将 它 显示 出 来 ( 把 它 aisplay 属 性 的 值 修改 为 block ); 
如 果 目 标 元 素 原来 就 是 可 见 的 ，. show() 方 法 就 什么 也 不 干 。 

$('#content') .Show() ; 

(4) 如 果 click 事 件 发 生 时 和 希望 隐藏 内 容 ， 只 需 在 目标 元 素 上 用 .hiae () 方 法 调用 代替 .show() 
方法 调用 。 

$('#content').hide(); 

(5) 还 有 一 个 替代 方法 , 如 果 我 们 希望 在 click 事 件 发 生 时 切换 目标 元 素 的 状态 ( 显示 /隐藏 )， 
就 使 用 .toggle() 方 法 。.toggle() 方 法 会 自动 判断 目标 元 素 的 当前 显示 状态 , 如 果 可 见 就 将 其 
隐藏 ， 如 果 隐 藏 就 将 其 显示 出 来 。 

$('tcontent').toggle(); 

(6) 我 们 将 以 上 所 有 代码 组 织 起 来 放 到 页 面 中 ， 就 得 到 以 下 代码 。 图 4-6 展 示 了 该 链接 被 单 击 
之 后 的 显示 效果 。 图 中 Firebug 插 件 处 于 激活 状态 , 我 们 可 以 清晰 地 看 到 内 容 元 素 的 display 属 1 
变 成 了 block。 


<!doctype html» 
«html» 
«head» 
«style» 
body (font-family:arial;) 
#content (display:none;) 
«/style» 
«script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» 
< /script> 
<script> 
$ (document) .ready (function () { 
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$('.content-link').click(function () { 
S$('scontent').toggle(); 
2); 
1); 
«/script» 
«body» 

«hi»Hello jQuery.«/h1» 

«p»Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida rhoncus 
commodo. Aenean sit amet augue iaculis sem consectetur accumsan vitae a arcu. Quisque 
quam diam, sollicitudin vel porta eget, vestibulum id justo. Vestibulum mattis metus 
sed lorem adipiscing facilisis. Vestibulum sed ipsum ut nibh rutrum ultricies. </p> 

«a href="#" class="content-link">Show More</a> 

<div id="content"> 

<p>Donec diam nisi, auctor sed tristique eget, pellentesque nec nisi. Sed vel 
libero ipsum. Quisque semper, lectus in pulvinar tristique, nibh urna scelerisque augue, 
at varius justo metus in orci. Suspendisse pretium arcu nec enim lacinia id cursus diam 
rhoncus. Praesent pulvinar volutpat luctus. Vivamus cursus adipiscing tellus, id 
fermentum turpis egestas lacinia. Aliquam tristique porttitor quam at pretium. In 
ornare aliquet iaculis. Phasellus sit amet leo id urna tincidunt fringilla. Nullam ut 
fringilla magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos himenaeos. Nunc leo arcu, sagittis eget volutpat at, bibendum at elit. 
Vestibulum a nisi nec felis malesuada fringilla. Quisque vitae mauris nec sapien porta 
pharetra eu vitae sapien. Cras bibendum eleifend malesuada.</p> 


</div> 
</body> 
</html> 
Tools Window Help Eg c &1 (3:07 Sun 7:12PM Q 
Mozilla Firefox. = 
http://www.smashingjquery.com/code/chap05/example5-2.html wy taz Google als 
2 imag i = aneou ^ n 


Hello jQuery. 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida rhoncus commodo. Aenean sit amet augue iaculis sem consectetur 
accumsan vitae a arcu. Quisque quam diam, sollicitudin vel porta eget, vestibulum id justo. Vestibulum mattis metus sed lorem adipiscing 
facilisis. Vestibulum sed ipsum ut nibh rutrum ultricies. Vivamus porttitor, enim id ornare ultrices, ante neque auctor eros, non posuere neque 
risus sit amet dolor. Curabitur mattis laoreet varius. Ut fermentum ipsum placerat ipsum ultrices aliquet. Ut commodo vulputate nisl, sed 
porta erat iaculis nec. Nullam vitae orci a sem aliquet fringilla. 


Donec diam nisi, auctor sed tristique eget, pellentesque nec nisi. Sed vel libero ipsum. Quisque semper, lectus in pulvinar tristique, nibh T 


+ E Console HTML~ CSS Script DOM Net Page Speed Page Speed Activity — YSlow )eeo 
R3 ^ Edit : html Style» | Computed Layout DOM 


v 
EE cement has no style rules. 
<head> 


Y <body> 
Y <div class="container"> 
<hi>Hello jQuery. </hi> 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida rhoncus 
commodo. Aenean sit amet augue iaculis sem consectetur accumsan vitae a arcu. 
Quisque quam diam, sollicitudin vel porta eget, vestibulum id justo. Vestibulum 
mattis metus sed lorem adipiscing facilisis. Vestibulum sed ipsum ut nibh rutrum 
ultricies. Vivamus porttitor, enim id ornare ultrices, ante neque auctor eros, non 
posuere neque risus sit amet dolor. Curabitur mattis laoreet varius. Ut fermentum 
ipsum placerat ipsum ultrices aliquet. Ut commodo vulputate nisl, sed porta erat 
iaculis nec. Nullam vitae orci a sem aliquet fringilla. </p> 
«a class-"content-link" href="#">Show More </a> 
> <div class-"content" style-"üisplayi blockj"» 
</div> 
</body> 
</html> 


3 
HE 


图 4-6 单 击 链接 后 的 屏幕 显示 ， 其 中 Firebug 处 于 激活 状态 ， 内 容 元 素 的 display 属 
已 被 .toggle() 方 法 改变 
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44.2 ”双击 事件 


双击 事件 (ablclick ) 和 click 事 件 的 工作 方式 相同 , 只 有 一 点 例外 一 一 必须 双击 鼠标 才 会 
触发 这 个 事件 。 我 并 不 经 常 使 用 ablclick 事 件 ， 不 过 如 果 需 要 让 Web 应 用 运行 起 来 像 桌面 程序 ， 
这 个 事件 可 就 有 大 用 了 。 

jQuery 的 ablclick 事 件 与 JavaScript 原 生 qblclick 事 件 一 样 ,只 是 原生 ablclick 事 件 就 像 原 
生 onclick 事 件 一 样 需要 直接 添加 到 元 素 上 。? 

桌面 软件 常常 要 求 双击 鼠标 以 激活 程序 中 的 某 个 功能 。 在 因特网 上 , 鼠标 双击 可 用 于 把 产品 
添加 到 购物 车 。 如 果 你 的 用 户 都 是 些 因特网 新 手 ( 他 们 习惯 于 双击 以 打开 某 个 东西 )， 也 可 以 使 
用 dblclick。 不 过 ，gdblclick 事 件 没有 click 事 件 那么 常用 
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在 页 面 的 链接 、 表 单元 素 或 一 些 其 他 元 素 上 使 用 小 提示 或 小 泡 泡 状 的 信息 窗口 , 能 有 效 地 帮助 
新 用 户 访问 站 点 , 同时 又 可 以 使 界面 对 老 用 户 保持 一 致 。 例 如 , 对 eee 卡 上 的 CVV 
数字 (信用卡 核 对 码 ) 的 用 户 来 说 ， 提 示 信 息 可 以 是 表单 上 的 简单 提示 指令 。 另 外 ， 我 们 还 可 提供 
更 进一步 的 交互 说 明 ( 见 图 4-7 )。 图 4-7 展 示 了 一 个 实际 的 由 鼠标 悬 停 行为 触发 的 提示 信息 示例 。 


@& Firefox File Edit View History Bookmarks Tools Window Help E Dt €) @ (4:16) Sun 10:54AM Q 

oe jQuery: The Write Less, Do More, JavaScript Library = 
(= Ce) (x) Ga) (nop://iavery.com/ By v E Goose a) r 
(g) Disable * A} Cookies - | CSS ~ | Forms  - Images - (.) Information ~ Miscellaneous * _./ Outline ~ „ | Resize » Tools + | View Source * „ Options 
图 jQuery: The write Less, Do More, J.. | + 


JQuery Plugins UI Meetups Forum Blog About Donate 


ja uel Y Download Documentation Tutorials Bug Tracker Discussion 


GRAB THE LATEST VERSION! 


jQuery is a fast and concise JavaScript Library that simplifies HTML CHOOSE YOUR COMPRESSION LEVEL: 
document traversing, event handling, animating, and Ajax interactions for 人 
rapid web development. jQuery is designed to change the way that you DEVELOPMENT (179KB, Uncompressed Code) 


write JavaScript. 
MA Supports CSS 1-3 selectors * jauerv 
v and more! 从 
Current Release: 


WHO'S USING JQUERY? 


LEARN JQUERY NOW! JQUERY RESOURCES 
What eos eat code look like? Here's the Getting Started With jQuery Developer Resources 


an + How jQuery Works + Mailing List. 


= 


© 2010，jQuery 项 目 和 jQuery UI 团 队 


图 4-7 jQuery 官方 站 点 上 由 鼠标 悬 停 行 为 触发 的 提示 信息 窗口 


CD 作者 再 三 强调 这 一 点 : 原生 事件 只 能 直接 添加 到 元 素 标签 内 。 请 中 文 版 的 读 考 注意， 这 一 观点 是 错误 的 ， 因 为 使 
用 原生 事件 照样 可 以 实现 行为 与 结构 的 分 离 。 
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jQuery 有 一 个 
事件 。 hoverJt TA X B 引用 来 显示 提示 信息 ， 实际 上 它 还 可 实现 下 拉 3 
所 示 Zappos 站 点 上 的 例子 ) 等 很 多 功能 。 


ew History Bookmarks Tools Window Help 


Mens Vans Shoes - Zappos.com Free Shipping BOTH Ways. 


(HAE http:/ /www.zappos.com/mens-vans-shoes 


KT (hover ) 事 件 , 它 内 部 使 用 了 原生 JavaScript 的 mouseenter 和 mouseleave 


菜单 和 图 片 预览 ( 如 图 4-8 


i 会 4) (&?3:06) Sun 7:22 Ph 


11.5) [12 25] 13 ] |* 
Width 
8 || © j|os 


Color 
Black (98) 
White (20) 
Gray (14) 
Navy (13) 
Multi (8) 
Blue (7) < Vans Vans Vans 
Brown (6) 

Price 

$50.00 and Under (120) 


$100.00 and Under 
(194) 目 


图 4-8 Zappos 站 点 5 ， 当 鼠标 悬 停 到 一 个 产品 之 上 时 显示 的 预览 图 片 


在 jQuery 中 利用 hover 事 件 添加 个 性 化 的 提示 信息 


常 容易 。 如 图 4-9 所 示 ， 在 下 面 这 个 例子 


中 ， 我 希望 做 到 当 鼠 标 悬 停 在 一 张 有 说 明 的 图 片上 时 ， 
hovez 事 件 也 可 以 应 用 于 一 个 类 似 场 合 : 不 希望 说 明 一 直 显 示 ， 只 有 用 户 将 鼠标 放 到 图 片上 时 ， 


才 将 说 明显 示 出 来 。 


(1) 为 这 张 图 片 创建 以 下 HTML ， 并 给 图 片 设 置 好 title 属 性 。 之 所 以 使 用 Fitle 属 性 ， 是 为 


了 确保 即使 用 户 禁 用 了 JavaScript, 一样 可 以 看 到 图 片 的 提示 信息 。 这 
见 第 1 章 ) 的 例子 。 


<h1>Hello jQuery.</h1> 

<div class="cart"> 
<h2>Shopping Cart</h2> 

</div> 

<div class="product"> 

<h3>Apple iPhone 4</h3> 


文 是 一 个 非常 好 的 渐进 增强 ( 参 


<div class="product-image"><img src="images/iphone.jpg" title="Steve Jobs 


holds up the newest iPhone 4." 


alt="Steve Jobs"></div> 


<p class="info">iPhone 4 is a GSM cell phone with a high-resolution display, 


FaceTime video calling, HD video recording, 
<p class="price">$299.99</p> 
<div class="add-to-cart">Double-click to buy me</div> 
</div> 


a 5-megapixel camera, and more.</p> 
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marks ools Window Help ag NE < A 4) (&1(3:00 Sun 7:25P Q 


E 


Mozilla Firefo 


CS) OS) Gf) CL. hep://smashingavey com/code/chapos/examples-4mim GAL cose co 
CSS + _] Forms * 2 Images * |j ation Mis Outline esize * ~ Tools + .. | View Source Optio 


Steve Jobs holds up the newest iPhone 4. 


iPhone 4 is a GSM cell phone with a 
high-resolution display, FaceTime video 
calling, HD video recording, a 
5-megapixel camera, and more. 


$299.99 ~ 


H 
Ax Console HTML% CSS Script DOM Net Page Speed Page Speed Activity — YSlow jooo 


kb | Edk body < html Style» Computed Layout DOM 
Y <html> body { example5-4.html (line 5) 
> <head> background: none repeat scroll @ @ 4999999, 
«div class-"container"» | 


<hi>Hello jQuery. </hi> 
> «div closs-"cort"» 
Y <div class="product"> 
<h3> Apple iPhone 4 </h3> 
> «div class-"product-image"» 
«p class-"toolTip"» Steve Jobs holds up the newest iPhone 4. </p> 


图 4-9 ”鼠标 在 图 片上 甚 停 , 信 息 提示 随即 显示 ; DOM 改 变 时 Firebug 输 出 随 之 改变 


(2) 下 一 步 是 添加 document .reaqy 事 件 处 理 函 数 ， 以 确保 在 DOM; 蕉 备 好 之 后 才 执 行 我 们 的 
jQuery 代码 。 


$ (document) .ready(function() { 


Jos 


(3) 选 中 .product-image 元 素 内 的 图 片 元 素 , 为 它 绑 定 mouseenter 和 mouseleave 事 件 处 理 
函数 。 这 是 一 个 后 代 元 素 选 择 器 ， 为 我 们 最 终 匹配 的 是 .product-image 元 素 的 后 代 元 素 。 
mouseenter 和 mouseleave 事 件 确 保 用 户 移 进 和 移出 图 片 时 会 触发 不 同 的 行为 。 


$ (document) .ready(function()( 
$('.product-image img') .bind({ 

mouseenter : function () { }, 

mouseleave: function () { } 
1); 
1); 
mouseover /mouseout 5jmouseenter/mouseleavelll 区 别 在 于 事件 触发 方式 不 同 。 

当 鼠 标 进 入 /离开 某 个 元 素 或 它 的 后 代 元 素 时 触发 nouseover/mouseout 事 件 。 mouseenter/ 

mouseleave 事 件 当 且 仅 当 鼠标 进入 具体 某 个 元 素 时 触发 ， 它 不 关心 目标 元 素 是 否 有 子 元 素 。 
mouseover/mouseout 事 件 ( 由 于 事件 冒 泡 ) 经 常 在 不 需要 的 时 候 不 小 心 触 发 ， 从 而 导致 一 些 脚 


本 问题 。 
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(4) 在 本 例 中 ,目标 元 素 是 .product-image 元 素 内 的 图 片 后 代 元 素 。 当 鼠标 进入 目标 元 素 时 ， 
mouseenter 事 件 触 发 。 在 这 个 事件 处 理 函 数 中 ， 我 们 创建 一 个 名 为 tooltip 的 变量 ,使 用 这 个 
变量 保存 利用 .attr() 方 法 获取 的 目标 元 素 的 title 属 性 值 。 


$ (document) .ready (function(){ 
$('.product-image img') .bind({ 
mouseenter : function () ( 
var toolTip - $(this).attr("title"); 
$('.info').after('«p class="toolTip">'+toolTip+'</p>'); 
Ja 
mouseleave: function () { } 
1); 
1); 


(5) 第 二 条 语句 将 tooltip 变 量 的 值 用 p.toolTip 元 素 包 庄 ， 然 后 插入 到 DOM 中 qiv.info 
元 素 之 后 。 


$ (document) .ready (function(){ 
$('.product-image img') .bind({ 
mouseenter : function () { 
var toolTip = $(this).attr("title"); 
$('.info'),after('«p class="toolTip">"+toolTip+'</p=") ; 
} 
mouseleave: function () { } 
1); 
1); 


(6) 最 后 ， 当 鼠标 离开 目标 元 素 时 触发 mouseleave 事 件 。 这 个 事件 中 ， 我 们 在 pb.toolTip 元 
LIA hide () 方 法 将 提示 信息 隐藏 : 


$ (document) .ready (function(){ 
$('.product-image img') .bind({ 
mouseenter : function () { 
var toolTip = $(this).attr("title"); 
$('.info').after('<p class="toolTip">'+toolTip+'</p>'); 
} 
mouseleave: function () { 
$('p.toolTip').hide(); 
} 
1); 
1); 


在 前 面 这 个 例子 里 , 我 使 用 了 映射 ( 键 为 事件 类 型 , 值 为 事件 处 理 函 数 ) 参 数 来 绑 定 mouseenter 
和 mouseleave 事 件 处 理 函 数 。 使 用 这 种 方式 绑 定 事件 处 理 函 数 的 优点 是 一 次 .bina() 调 用 就 能 
为 同一 元 素 绑 定 多 个 事件 处 理 函 数 。 

JavaScript 对 象 字面 量 ， 又 称 为 映射 , 是 键 值 对 的 集合 。 它 的 语法 是 用 一 对 大 括号 包 着 用 逗号 
分 隔 的 键 值 对 ， 其 中 键 和 值 分 别 用 单 引 号 括 起 来 ， 键 和 值 之 间 用 冒号 分 隔 。 每 个 键 / 值 对 单独 占 


pum 


D 此 处 的 处 理 是 有 问题 的 ， 会 造成 鼠标 多 次 进入 就 产生 多 份 p .toolTip， 我 们 应 该 用 .remove () 删 除 p.toolTip， 
而 不 是 隐藏 它 。 
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一 行 ， 就 像 下 面 这 个 例子 一 样 : " 
( 


‘namel' : 'valuel', 
'name2' : 'value2', 
'name3' : 'value3' 


} 

有 一 种 简便 的 方式 使 用 mouseenter 和 mouseleave 事 件 处 理 函 数 ， 效 果 完 全 相同 。hover 
事件 内 部 调用 了 mouseenter 和 mouseleave 事 件 ,， 却 使 用 了 更 简洁 的 语法 ， 且 更 容易 使 用 ,请 
看 下 面 的 代码 : 

$ (document) . ready (function(){ 

$('.product-image img') .hover ( 
function () { 


var toolTip = $(this).attr("title"); 
$('.info').after('<p class="toolTip">'+toolTip+'</p>'); 


Is 
function () ( 
$('p.toolTip').hide(); 


1); 
ky 


4.4.4 ”利用 mousedown 和 mouseup 事 件 实现 添加 到 购物 车 功能 


拖 放 功 能 在 网 上 越 来 越 流 行 了 。 拖 放 允 许 用 户 在 屏幕 上 以 类 似 3D 的 风格 拖 动 元 素 ， 把 用 户 
交互 提高 到 了 一 个 更 高 的 层次 。 图 4-10 演 示 的 是 雅虎 虚拟 棒球 运动 界面 灵活 的 拖 放 特 性 。 

JavaScript 原 生 API 提 供 了 onMousedown 和 onMouseup 事 件 , 它们 可 以 租 入 任意 元 素 以 捕获 这 
些 事 件 。 原 生 JavaScript 事 件 与 jQuery 事件 的 主要 不 同 之 处 在 于 ， 原 生 API 都 在 事件 名 字 前 面 添加 
了 “on” 这 个 单词 。jQuery 中 的 所 有 事件 都 未 添加 “on”, 原生 API 中 的 onMousedown 和 onMouseup 
事件 在 jQuery 中 分 别 对 应 mousedown 和 mouseup。 

在 这 一 节 , 我 将 带 你 搞 懂 一 些 基本 概念 ,然后 一 起 构建 一 个 简单 的 拖 放 系统 。 如 果 寻 求 一 个 
健壮 的 拖 放 解 决 方案 ，jQuery UI 提供 了 无 数 支持 拖 放 的 交互 组 件 ， 我 们 可 以 轻易 地 将 其 整合 到 
Web 应 用 中 。jQuery UI 是 一 个 基于 jQuery 的 UI 扩展 库 ， 提 供 了 各 种 组 件 、 界 面 元 素 以 及 主题 ， 用 
于 构建 健壮 的 Web 应 用 。 如 果 想 了 解 关 于 jQuery UI 的 更 多 信息 ， 请 访问 jQuery UI 的 官方 站 点 
Jqueryui.com。 

在 图 4-11 中 ， 我 复 用 了 前 面 例子 中 的 购物 车 代码 。 主 要 的 不 同 在 于 之 前 使 用 ablclick 事 件 
将 商品 添加 到 购物 车 ， 这 里 则 使 用 mousedqown 和 mouseup 事 件 模 拟 单 击 和 释放 一 件 商 品 。 


CD 此 处 撒 写 并 不 十 分 准确 。 如 果 键 是 合法 的 Javaseript 变 量 和 名， 则 可 以 省 略 引号 。 值 如 果 是 一 个 变量 ， 就 一定 不 能 加 
引号 。 另 外 ， 每 个 键 / 值 对 单独 写 一 行 容易 阅读 ， 是 好 的 编码 习惯 ， 但 并 非 语法 要 求 。 多 个 键 / 值 对 完全 可 以 写 到 
一 行 之 中 。 
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图 4-10 ”雅虎 虚拟 棒球 运动 中 的 球 队 换 人 功能 中 使 用 了 灵活 的 拖 放 界面 


ooo Mozilla Firefox ce 


(a ja)- CO (x) Gf). CLE hie: /smashingiauery.com/code/chap05/exampleS--S.html YY) Gi coooe Q) i 


@ Disable + Æ Cookies + L] CSS + E] Forms + 于 Images + @ Information + | Miscellaneous + / Outline + $2 Resize + J^ Tools + f2) View Source * {> Options 
[] http:/ /smashingj...exampleS-5.html. 


Hello jQuery. 


Shopping Cart contains 1 item! 


Apple iPhone 4 is now in the cart 


Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity — YSlow ( jeeo 


i$ Edit body - html (Sie Computed Layout DOM 


CELLS ————— mms tmi 
| e ple5—5.html (line 5) 
«div class="container"> | body { 


background: none repeat scroll 0 @ #999999; 
<hi>Hello jQuery. </hi> font-family: arial; 
V <div class="cart"> |} 
<h2>Shopping Cart contains 1 item! </h2> 
Apple iPhone 4 is now in the cart 
<br> 
</div> 
V <div class-"product" style="border: 3px solid rgb(204, 204, 204); display: 
none;"» 
«h3» Apple iPhone 4«/h3» 
> «div class"product-image"> 
<p class-"info"»iPhone 4 is a GSM cell phone with a high-resolution display, 
FaceTime video calling, HD video recording, a S-megapixel camera, and | 
more. </p> | 
«p class-"price"» $299.99 </p> | 
rtl 
了 


<div class="add-to-cart">Double-click to buy me</div> 
idiae 


# BA 365K ossis d 


图 4-11 Firebug 激 活 状态 下 记录 的 简单 拖 放 功能 对 DOM 的 改变 〈 另 见 彩 插图 4-11 ) 
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(1) 首先 在 页 面 中 创建 必要 的 HTML 元 素 。 我 虚构 了 一 款 产品 和 一 个 购物 车 ， 不 过 在 本 例 中 
我 们 的 脚本 只 与 aiv.product 打 交道 : 


<div class="cart"> 

<h2>Shopping Cart</h2> 

</div> 

<div class="product"> 

<h3>Apple iPhone 4</h3> 

<div class="product-image"><img src="images/iphone.jpg" title="Steve Jobs 
holds up the newest iPhone 4."></div> 

<p class="info">iPhone 4 is a GSM cell phone with a high-resolution display, 
FaceTime video calling, HD video recording, a 5-megapixel camera, and more.</p> 

<p class="price">$299.99</p> 

<div class="add-to-cart">Double-click to buy me</div> 

</div> 


(2) 接 下 来 添加 aocument . readyS# Fb FH PRA, VU DRE AS RS EDO Mie A 3532 aT: 


$ (document) . ready (function() { 
hys 


(3) 下 一 步 是 添加 mousedown 和 mouseup 事 件 处 理 函 数 。 我 使 用 .bina() 方 法 将 事件 处 理 函 数 
绑 定 到 .produc t 元 素 : 


$ (document) .ready (function()t{ 

$('.product').bind(( 
mousedown : function () { }, 
mouseup: function () ( ) 

1): 

qj 


(4) 当 和 鼠标 在 元 素 上 按 下 时 ， 触 发 mousedown 事 件 。 这 时 我 们 允许 元 素 被 拖 动 ， 并 将 其 边框 
改 为 3 px 宽 的 红色 实 线 边框 : 


$ (document) .ready (function() { 
$('.product').bind(( 
mousedown : function() ( 
$(this).css('border','3px solid red'); 
F; 
mouseup: function() { } 
1); 
Jus 


(5) 在 按 下 状态 释放 鼠标 按钮 会 触发 mouseup 事 件 ， 这 时 在 下 面 的 代码 中 我 们 要 做 几 处 改动 。 
首先 ， 需 要 把 边框 恢复 为 3 px 宽 的 浅 灰 色 (#cccccc ) 实 线 边框 ， 然 后 选中 .cart 元素 ， 为 其 追 
J “Apple iPhone 4 is now in the cart" (iPhone 4 已 放 和 人 购物 车 ) 文本 ， 接 着 修改 .cara 
元 素 内 的 H2 元 素 文本 为 “Shopping Cart contains 1 item!”( 购物 车 中 有 一 件 商 品 )， 最 后 
隐藏 .product 元 素 。 


$ (document) . ready (function() { 
$('.product').bind(( 
mousedown : function() ( 
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$(this).css('border','3px solid red'); 
} 
mouseup: function() { 
$(this).css('border','3px solid #ccc'); 


$('.cart').append('Apple iPhone 4 is now in the cart<br>'); 
$('.cart h2').text('Shopping Cart contains 1 item!'); 
$(this).hide(); 


1); 
1); 


关键 之 处 在 于 我 们 必须 能 检测 到 鼠标 按 下 和 释放 事件 , 并 为 这 两 个 事件 编写 截然 不 同 的 事件 
处 理 函数 。 图 4-11 展 示 的 是 Firebug 激 活 状态 下 记录 下 的 简单 拖 放 功 能 对 DOM 的 改变 。 

所 有 鼠标 事件 都 有 相应 的 简写 形式 ， 可 使 开发 者 以 更 简洁 的 方式 在 Web 站 点 或 应 用 程序 中 使 
用 jQuery 功能 。 

下 面 是 使 用 .bina() 方 法 绑 定 click 事 件 处 理 函 数 的 普通 写法 : 

$('.container').bind('click', function(){}); 

将 上 面 这 个 事件 绑 定 改 用 简写 形式 书写 : 

$('.container').click(function() {}); 

使 用 简写 形式 的 缺点 在 于 无 法 做 到 像 下 面 这 样 一 次 为 多 个 事件 绑 定 处 理 函 数 : 


$('.container').bind('click dblclick', function())}; 


44.5 “实现 图 片 翻转 效果 


est te tte nl 受 的 事 。 大 约 10 年 前 我 第 一 次 使 用 HTML 和 CSS 实 现 
图 片 翻转 效果 ， 记 得 当时 使 用 的 是 Marcomedia HomeSite 编 辑 器 ， 这 是 一 款 支 持 所 见 即 所 得 的 编 
ids, E UE 的 JavaScript 代 码 〈 大 约 有 25 行 ,天 知道 为 什么 需要 那么 多 ! ), 只 为 了 
实现 简单 的 图 片 翻转 。 在 下 面 这 个 解决 方案 里 , 我 将 演示 给 你 看 : 同样 做 这 件 事 情 ， 现 在 只 需要 
4 行 代码 ! 

(1) 首先 需要 为 图 片 添加 一 个 class， 这 样 我 们 就 能 使 用 jQuery 选择 器 方便 地 找到 它 : 

<img src="images/rollover_off_btn.gif" class="button" alt=""/> 

(2) 接 下 来 设置 .hover () 事 件 : 


$('.button').hover( 
function() ( 
Far 
function() { 
}); 
(3) 使 用 .hover 事 件 内 的 两 个 事件 处 理 函数 改变 图 片 的 src 属 性 。 第 一 个 事件 处 理 函 数 对 应 
mouseenter 状 态 ， 第 二 个 对 应 mouseleave 状 态 。 如 下 所 示 ， 我 们 使 用 .attr() 方 法 改变 src 属 


性 的 值 ( 图片 路 径 ): 
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$('.button').hover( 
function() ($(this).attr('src','images/rollover on btn.gif');), 
function() ($(this).attr('src','images/rollover off btn.gif'); 


1): 
下 面 是 本 解决 方案 实现 图 片 翻转 效果 的 全 部 代码 : 


<!doctype html» 
«html» 
«head» 
«script src-"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"» « 
/script> 
<script> 
$ (document) . ready (function() { 
$('.button').hover( 
function() { 
$(this).attr('src','images/rollover on btn.gif'); 
Is 
function() { 
$(this).attr('src','images/rollover off btn.gif'); 
1); 
1); 


«/script» 
«body» 
«img src-"images/rollover off btn.gif" class="button" alt="Button"/> 
«/body» 
</html> 


4.5 捕获 表单 事件 


类 似 鼠 标 事 件 使 用 .bind() 方 法 绑 定 事 件 处 理 函 数 ， 表 单 事件 也 一 样 可 使 用 .bina () 方 法 绑 
定 事件 处 理 函数 。 在 Web 站 点 和 应 用 中 表单 极其 常见 , 几乎 我 们 使 用 的 每 一 个 Web 应 用 都 有 表单 ， 
从 基本 的 搜索 到 成 熟 的 三 步 注册 表单 ， 表单 几 乎 可 应 用 于 任意 的 场合 。 在 一 些 应 用 场合 , 较 长 的 
表单 要 求 用 户 填 写 很 多 的 信息 ,这 不 但 有 可 能 把 用 户 吓 到 ,还 会 导致 难以 清理 的 数据 。 在 触发 一 
些 动 作 时 ， 比 如 当 用 户 离开 某 个 表单 项 时 触发 表单 验证 , 或 者 提醒 用 户 某 个 表单 项 需要 特别 注意 
时 ,jQuery 事件 能 够 帮 上 大 忙 。 善 用 表单 事件 能 以 多 种 方式 增强 用 户 体 验 。 

jQuery 提供 的 少量 几 个 表单 事件 能 有 效 地 增强 用 户 填写 表单 的 体验 ， 这 几 个 事件 在 原生 
JavaScript 中 也 很 常用 。 表 4-3 列 出 了 这 些 事件 的 名 字 及 其 功能 。 


表 4-3 jQuery 表单 事件 名 字 与 功能 一 览 表 


表单 事件 名 表单 事件 功能 

change ( ) 表单 项 的 值 改变 时 触发 此 事件 

focus () 敲 TAB 键 进 入 某 个 文本 域 或 者 选择 某 个 文本 域 (得 到 焦点 时 ) 时 触发 此 事件 
focusin() 一 个 元 素 或 它 的 子 元 素 得 到 焦点 时 触发 此 事件 

focusout () 一 个 元 素 或 它 的 子 元 素 失 去 焦点 时 触发 此 事件 

blur () 文本 域 Cinput:text ) 或 文本 框 (textarea ) 失去 焦点 时 触发 此 事件 
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(EE) 
表单 事件 名 表单 事件 功能 
select () 元 素 内 的 文本 被 选中 时 触发 此 事件 
submit () 表单 提交 时 触发 此 事件 〈 或 者 单 击 了 Submit 按 钮 ， 或 者 按 下 了 回 车 键 ) 
reset () 表单 使 用 input type="reset" 重 置 表单 数据 时 触发 此 事件 
45.1 得 到 焦点 时 为 表单 元 素 添加 边框 


focus 事 件 常常 用 来 指导 用 户 填写 表单 项 。 当 一 个 元 素 获 得 焦点 时 触发 focus 事 件 ， 这 种 元 


素 通 党 是 一 个 表单 元 素 。 当 用 户 开 始 输入 数据 时 ， 我 们 可 以 利用 focus 寻 


事情 。 


在 下 面 这 个 例子 中 ,我 们 演示 了 当 用 户 单 击 表单 的 输入 框 时 ， 利 月 
素 添加 CSS 边 框 的 功能 。 如 果 用 户 需 要 依次 填写 很 多 表单 项 ， 这 一 功能 非常 有 月 


目前 正在 填写 的 是 哪个 表单 项 。 


(1) 第 一 步 还 是 准备 HIML。 我 们 添加 一 个 文本 框 并 为 它 设 置 1a 属 性 的 值 


<input type="text" name="firstname" id="firstname"/> 

(2) X&Hi£irstname7Uzk, Aa NASB £ocussEA TIT PK A 
$('.firstname').bind('focus', function()}; 

(3) 在 事件 处 理 函 数 中 为 目标 元 素 设置 边框 属性 ( 添加 边框 )。 


$('.firstname').bind('focus', function() { 
$(this).css('border','1px solid red'); 


1) 


firstname, 


攻 件 的 处 理 函 数 ， 做 一 些 


Hfocus () 事件 为 该 表单 元 
日 。 它 会 提醒 用 户 


现在 input#firstname 已 绑 定 focus 事 件 处 理 函 数 , 无 论 是 通过 鼠标 单 击 还 是 前 TAB 键 进入 


这 个 文本 域 ， 它 者 


会 自动 显示 1 px 的 红颜 色 实 线 边框 。 瞧 ， 就 这 么 简单 。 


45.2 ”焦点 离开 输入 框 之 后 显示 消息 
blur 事 件 与 focus 事 件 相 反 , 它 在 一 个 文本 框 或 元 素 失 去 焦点 时 触发 ,在 真实 的 世界 里 ,blur 


事件 常用 于 验证 用 户 输入 的 电子 邮件 地 址 是 否 合法 ,或 者 为 文本 框 画 上 红色 边框 等 。 我 将 在 第 8 


章 专 门 讲解 如 何 创 建交 互 性 好 的 表单 元 素 。 


4.6 捕获 键 


除了 事件 来 源 是 键盘 这 一 点 之 外 , 键盘 事件 与 鼠标 事件 非常 相似 。 当 我 们 按 下 一 个 键 或 者 用 
键盘 修改 了 文本 域 的 内 容 时 就 会 触发 键盘 事件 。 键盘 事件 常常 用 于 浏览 右 游 戏 和 表单 验证 。 在 那 


RA 


些 必 须 注册 才能 个 


用 的 站 点 上 ，, 在 我 们 输入 用 户 名 的 过 程 中 , 用 户 名 验 说 


FE 脚本 可 能 已 经 在 键盘 寻 


E 


H- 
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件 的 驱动 下 开展 工作 了 。 表 4-4 列 出 了 这 些 事件 以 及 它们 的 功能 。 


表 4-4 jQuery 键盘 事件 一 览 表 
事件 名 字 事件 功能 
keydown () 当 一 个 键 被 按 下 时 触发 此 事件 
keypress () " 当 一 个 键 被 按 下 一 次 或 多 次 时 触发 此 事 
keyup () 当 一 个 键 弹 起 时 触发 此 事件 


puni 
= 
= 


ST 


对 任何 Web 表 单 来 说 ， 验 证 用 户 输入 都 至 关 重 要 。 来 自用 户 的 输入 数据 需要 验证 无 误 才 能 确 
保 (储存 的 ) 数据 干净 可 用 。 利 用 表 4-3 中 的 change 事 件 可 以 在 文本 框 中 的 内 容 发 生变 化 时 执行 
检查 任务 ,很 多 编程 爱好 者 觉得 仅 有 JavaScript 验 证 不 够 安全 ,实际 上 是 否 需 要 增加 服务 器 端 验证 ， 
要 看 验证 的 是 些 什 么 数据 。 

图 4-12 展 示 了 一 个 常见 应 用 ， 它 是 Twitter 的 输入 框 ， 这 个 文本 框 至 多 允许 输入 140 个 字符 。 


每 输入 一 个 字符 ， 人 允许 输入 的 字符 数 就 减少 一 个 。 页 面 上 有 一 个 提示 文本 ,告诉 你 还 可 以 输入 多 
少 字符 。 


140 字 符 限制 下 显示 的 剩余 字符 数 


Twitter / Home 
4)»)- (€) (x) Gf). Co hip jrwitter.com/ E v) M coool Q) tir 


@ Disable + Æ Cookies + |. CSS + =] Forms + S! Images + @ Information * Miscellaneous + g Oufline + Ī Resize + ^ Tools + f>] View Source * .. Options 
t Twitter / Home 十 = 


Hind People Settings Help Sign out 


jake rutter 


What's happening? 
Workin' on a great tutorial! 
Add your locatior 


Latest: Tied the Yelp Phone API into one of my sites using jQuery: 
http://bit.ly/dq61NG #jquery ET 


Home 


m — How to Make Your Blog Addictive Like World of 
Warcraft http://bit.ly/ccq79v 


. Professional Dark Header 
http:/ /www.tutengine.com/tutorial/9869/professional- 


dark-header/ photoshop 


Nielson has found that while 14% of people 
trust ads, 78% of people trust consumer recommendations. 
#opensky 


iphone 3G, iphone 4 -- full 3G. verizon mifi 
b same. verizon droid 2 - NO G :) 


» grapevine / tejon pass / lebec fire near NB I5 & 
" in hills. even helicopter drops. but small, traffic moving slowly 


© 2010, Twitter ( www.twitter.com ) 


图 4-12 Twitter 状态 输入 框 的 字符 数 限 制 功能 


(D 关于 keypress 事 件 ， 详 见 译 者 的 博文 :“keypress 事 件 备 忘 ”， 地 址 为 http:/tlava.cn/blog/21689。 
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和 其 他 事件 一 样 ， 我 们 使 用 .bind() 方 法 绑 定 change 事 件 ; 
$('.container').bind('change', function())); 


在 下 面 这 个 例子 中 , 我 演示 给 大 家 如 何 编写 类 似 Twitter 上 显示 剩余 字符 提示 的 脚本 。 这 个 例 
子 的 最 终 显示 效果 见 图 4-13。 


000 Mozilla Firefox Ə 


e E)- [48] ey Ga) CL http://smashingjquery.com/code/chap05 /exampleS-6.html D Y) GAL Googie Q) i 


jJ? Tools + [7] View Source + > Options 


@ Disable + Æ Cookies + [I CSS * 回 Forms + 3 Images + @ Information » C Miscellaneous + -7 Outline + 2 Resize + 
口 hep://smashingj..example5-6.html | + 


Hello jQuery. 


Im working on a great tutorial! 


-70 


Console HTMLw | CSS Script DOM Net a Page Speed Activity YSlow C Jooo | 


| Style | Computed Layout DOM 


body { example5- ~6.html (line 5) 
background: none pepont scroll 0 @ 4999999; 


. 
l-——|É 068 68 on: 
«div class-"container": t 


«hi»Hello jQuery. «/hi» 
<input id-"status" type="text" size~"100"> 
v class="counter"> -70 </di 


图 4-13 ”输入 字符 到 文本 框 的 过 程 中 脚本 不 断 执行 ， 计 数 器 数字 不 断 减 小 


() 第 一 步 是 准备 HIML。 我 们 使 用 一 个 textarea 标 签 ,并 把 它 的 idq 属 性 设置 为 status。 我 
们 会 把 change 事 件 处 理 函数 绑 定 到 这 个 输入 框 ， 以 检测 用 户 输入 的 字符 。 

<textarea cols="50" rows="5" id="status"></textarea> 

(2) 添加 一 个 aiv 空 元 素 ， 设 置 它 的 class 属 性 为 counter。 在 输入 框 中 输入 数据 时 ， 和 一 余 字 
符 数 将 显示 在 这 里 。 

<div class="counter"></div> 


(3) 添加 一 个 变量 maxNum， 它 负责 保存 最 多 人 允许 输入 的 字符 数 ， 我 们 把 它 的 值 设 置 为 100。 


var maxNum = 100; 


(4) 选 中 #status 元 素 ， 然 后 为 其 绑 定 keypress 事 件 。 当 有 键 被 按 下 时 ， 就 会 触发 keypress 
事件 ， 因 此 在 表单 输入 元 素 得 到 焦点 后 ， 它 特别 适合 用 来 执行 检测 输入 。 
$('#status') .bind({ 


keypress : function() { 


1); 
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(5) 当 keypress 事 件 发 生 时 ， 我 需要 拿 到 #status 输 入 框 的 值 。 我 使 用 变量 inputText 保 存 


这 个 值 , 还 创建 了 一 个 名 为 numchar 的 变量 保存 inputText 变 量 的 长 度 ( 字符 数 ), 然后 创建 了 一 
个 名 为 cnarRemain 的 变量 保存 maxNum 减 去 numchar 的 结果 (剩余 字符 数 )。 


$('#status') .bind({ 

keypress : function() { 
var inputText = $(this).val(); 
var numChar = inputText.length; 
var charRemain = numChar - maxNum; 


} 
1); 


(6) 搞定 这 些 变 量 之 后 ， 需 要 检查 numchar 是 否 小 于 等 于 maxNum， 为 此 我 添加 了 一 个 条 件 语 


句 。 如 果 这 个 比较 表达 式 为 真 ， 我 就 选中 .countez 元 素 并 修改 它 的 文本 为 charRemain ( 剩余 字 
符 数 )。 


$('sstatus').bind(( 
keypress : function() ( 
var inputText = $(this).val(); 
var numChar - inputText.length; 
var charRemain - numChar - maxNum; 
if (numChar <= maxNum) { 


$('.counter').text(charRemain); 


) 


1); 


(7) 最 后 一 步 ， 添 加 一 个 else if 子 句 检查 numchar 是 否 大 于 maxNum。 如 果 这 个 表达 式 为 真 


则 使 用 event. preventDefault() () 方 法 阻止 用 户 输入 更 多 内 容 。 event .prevent 
法 等 同 于 原生 JavaScripti 


$('sstatus').bind(( 
keypress : function() { 
var inputText = $(this).val(); 


var numChar - inputText.length; 
var charRemain - 


Default () 方 
看 句 return false， 用 来 阻止 事件 的 默认 行为 (字符 上 屏 )。 


numChar -- maxNum; 
if (mumChar <= maxNum) { 


$('.counter').text(charRemain); 


} 
else if (numChar > maxNum) { 
event .preventDefault(); 
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用 特效 为 Web 站 点 添 色 


最 近 几 年 JavaScript 特效 逐渐 成 熟 , 已 经 成 为 多 年 来 一 直 在 线 上 特效 领域 占据 统治 地 位 
的 Adobe Flash 的 有 力 竞 争 者 。 以 前 要 在 Web 站 点 上 使 用 图 片 相册 、 动 画 菜单 或 动画 视频 效果 ， 
非 Flash 不 行 , 今天 人 们 却 越 来 越 多 地 使 用 JavaScript， 以 便 更 容易 地 兼容 多 个 浏览 器 和 移动 
设备 。JavaScript 特 效 的 日 益 流行 已 经 成 为 促使 Web 设 计 师 和 开发 者 使 用 jQuery 特效 API 的 主 
要 动力 。 

jQuery 总 能 充分 挖掘 原生 JavaScript 效 果 以 提供 健壮 的 、 易 于 整合 到 任何 站 点 的 功能 ,这 一 点 
对 我 们 来 说 并 不 陌生 。 因 为 这 些 效果 都 由 jQuery 提供 ， 所 以 极其 容易 使 用 ， 不 可 避免 地 成 为 广大 
Web 设 计 师 和 开发 者 的 一 个 热门 选择 。 

在 本 章 中 ， 我 们 将 一 起 透 过 jQuery API 研 究 这 些 特效 ， 讲 解 每 种 特效 的 使 用 ， 然 后 一 起 研究 
几 个 真实 的 应 用 场景 。 


5.1 jQuery 特效 能 做 些 什么 


作为 一 名 Web 设 计 师 和 前 端 开发 人 员 ， 让 站 点 的 用 户 界面 好 用 是 我 们 的 职责 。 在 一 个 页 面 上 
我 们 经 常 需要 让 一 些 元 素 在 屏幕 上 显示 出 来 或 者 隐藏 起 来 , 以 容纳 更 多 内 容 。 用 户 需要 并 且 期 待 
Web 站 点 能 即时 展现 : 他 们 不 喜欢 笨重 的 站 点 ， 一 个 又 一 个 页 面 永 无 休止 地 加 载 。 

Facebook， 极 受 欢 迎 的 社交 网 络 ， 拥 有 5$ 亿 多 用 户 ， 它 的 界面 由 JavaScript 驱 动 ， 不 但 有 趣 而 
且 交 互 性 极 佳 。 登 录 Facebook， 无 需 打 开 任 何 新 页 面 你 就 可 以 和 朋友 们 聊天 ,或 者 查看 朋友 们 的 
新 鲜 事 。 这 么 好 的 用 户 体验 是 通过 JavaScript 特 效 ( 显示 、 隐 藏 或 者 动画 ) 实现 的 。 类 似 Facebook 
的 诸多 Web 站 点 正在 为 用 户 期 望 的 线 上 体验 设立 高 标杆 。 

基于 地 理 定位 技术 的 应 用 程序 开始 赢得 眼球 ， 变 得 越 来 越 流 行 。 多 数 这 样 的 站 点 前 端 都 使 
用 JavaScript 整 合 了 类 似 谷 歌 地 图 的 技术 。 图 $-1 展 示 的 是 Gowalla 站 点 , 一 个 基于 地 理 定 位 的 社区 。 
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TT -——— l __ Spots on Gowalla 


a >| + © http://gowalla.com/spots#q=Apple%20Store&l=nyc&order=checkins_count%20desc&per. rpage=20 C fa- Google 


[Gowalfai Home Spots Trips Q Search... Blog Signin 


Apple Store | nyc | 


Popular terms: Apple Store, Bar, Bookstore, Coffee, more... Popular cities: Atlanta, Austin, Berlin, Boston, more... Advanced... 
+ ee | Sanie | ee | Teran ] 

f Apple Store, Fifth Avenue 1209 1818 i OL rea — 7 

New York, NY / Apple Store people checkins K 

Apple Store, SoHo 
é 103 Prince Street, New 

Apple Store, West 14th Street 287 572 1 ah Sakata York City, NY 1001... 

New York, NY / Apple Store people checkins AS 

Apple Store, SoHo 334 521 

New York, NY / Apple Store people checkins 

Apple Store, Upper West Side 248 411 

New York, NY / Apple Store people checkins 

Apple Store, Staten Island 32 295 

New York, NY / Apple Store people checkins 

Tekserve 58 106 

New York, NY / Technology people checkins 


© 2010, GowallaZ F] 
图 5-1 Gowalla 网 站 ， 一 个 基于 地 理 定位 的 社区 
jQuery 提供 了 一 些 基 本 效果 ,如 显示 、 隐 藏 、 滑 动 和 淡 入 淡出 。 表 5-1 简 要 列 出 了 这 些 基本 效 
果 ， 这些 函 数 的 用 法 都 很 相似 ， 使 用 相同 的 可 选 参 数 。 
表 5-1 jQuery 基本 效果 


方 法 名 方法 元 素 
show() 显示 一 个 元 素 
hide() 隐藏 一 个 元 素 
toggle() 依据 当前 状态 切换 显示 / 隐藏 状态 
slideDown () 以 向 下 滑动 展开 的 方式 显示 元 素 
slideUp () 以 向 上 卷 动 的 方式 藏 起 元 素 
slideToggle() 以 滑动 / 卷 动 方式 切换 元 素 的 展开 / 收 起 状态 
fadeIn() 元 素 以 淡 人 的 方式 显示 出 来 
fadeout () 元 素 以 淡出 的 方式 消失 


fadeTo() 淡 入 或 淡出 到 某 个 透明 度 
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5.2 使 用 .show() 和 .hide() 方 法 显示 或 隐藏 元 素 


使 用 jQuery 显示 /隐藏 元 素 是 最 简单 的 特效 。 在 前 面 几 章 的 例子 中 我 已 经 用 过 这 两 种 特效 , 不 
过 一 般 来 说 , 这 些 特效 经 常用 于 click 事 件 人 处 理 。 它 广泛 应 用 于 整个 因特网 。 图 5-2 显 示 的 是 谷歌 
Gmail 使 用 显示 / 隐藏 特效 显示 一 个 层 ， 展 示 其 支持 “拨打 电话 ”这 一 新 功能 。 


000 Gmail: Email from Google 


4 | >) lack |S https:/ www.google.com accounts /ServiceLogin?service=mail&passive=true&rm=false&continue _© | (Q7 Google 


Grail Welcome to Gmail 


New! Call phones from Gmail Sign in with your 
Yeu Roa pose call any phone in the US and Canada for free and at very low rates intemationally. Google Account 
Username: 
Bear, me, Alex (5) SISTI -7x@ ex: pat@example.com 
Chat sm: i 
Ton i © $10.00 + Password: 
Iw 


Search, add, or invite Bryan 
Tomn =- Search or dial a 区 Stay signed in 
m Ted Taco 
3 (Sign in 
Set status here M 1 2 3 M J 
[ a victoria E a t 


X. Call phone 

€: Mom í 5 5 Can't access your account? 
* Jason © Phil, me (3) GHI KL MNO 
M 2 $t Arielle WD E 9 we 
Sra es = emper New to Gmail? It's free and eas 
= Alberto Mike L s 0 # y. 
= Robin siokru —— 


© Vincent Phil Create an account » 


9 Famsworth 


About Gmail New features! 


©2010 Google - Gmail for Business - Gmail Blog - Terms & Privacy - Help 


O 2010, Google 


图 5-2 Gmail 使 用 显示 /隐藏 特效 展示 推广 其 “拨打 电话 ”的 新 功能 层 


使 用 选择 器 选中 元 素 , 然后 调用 .show() 或 .hide() 方 法 。 这 两 个 方法 都 支持 两 个 可 选 参 数 。 
duration 参 数 决 定 动画 的 持续 时 间 ， 可 取 的 值 有 fast 、slow 或 者 以 毫秒 为 单位 的 整数 ( 如 600、 
200、700 等 )。callback 参 数 是 一 个 回调 函数 ， 它 会 在 .show() 执 行 完 成 时 被 调用 。 

$(selector).show(duration, callback) 

下 面 这 个 例子 为 一 个 链接 绑 定 了 click 事 件 处 理 函数 。 当 单 击 这 个 链接 时 ，div .recipe 元 
素 就 显示 出 来 。 这 是 使 用 .show() 方 法 的 最 基本 形式 。 


<style> 

.recipe {display:none; } 

</style> 

$('.recipe-name').bind('click', function() { 
$('.recipe').show(); 


1); 
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<a href="#" class="recipe-name">Key Lime Pie</a> 
<div class="recipe">Key lime pie is an American dessert made of key lime juice, egg 


yolks, and sweetened condensed milk in a pie crust.</div> 


jQuery .show () 方 法 为 div 元 素 设 置 了 display:block 行 内 样式 , 从 而 使 它 显示 出 来 。 图 $-3 
展示 的 是 上 述 示 例 代 码 在 浏览 器 中 的 泻 染 结果 。 


000 Mozilla Firefox 

(a Je) CG © Gf) e» “ http://smashingjquery.com/code/chap06/example-show.htmlit uv) Ga coo jle a) r” 
© disable * Æ Cookies + CSS + E] Forms + E Images * @ Information ，[ 习 Miscellaneous + 7 Outline + 22 Resize * gP Tools + {2) View Source + Options 
] D) http; /smashing...ample-showhtmi. [EF = 


Key lime pie is an American dessert made of key lime juice, egg yolks, and sweetened condensed milk in a pie crust. 


* 
x Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 
k3 ^ Edit body - html Style» | Computed Layout DOM 
Y <html> 
> <head> 


This element has no style rules. 


«a class-"recipe-name" href="#">Key Lime Pie</a> 
<div class-"recipe" style="display: block;">Key lime pie is an American dessert made of 
key lime juice, egg yolks, and sweetened condensed milk in a pie crust. </div> 


</body> 
</html> 


luz Done BA 25.2k 0.841s A 


图 5-3 上述 示例 代码 在 浏览 器 中 的 泻 染 结果 


.hiae () 方 法 工作 方式 与 .show() 几 乎 完全 一 样 ， 只 有 一 点 不 同 ， 它 为 选中 元 素 添加 行内 样 
式 daisplay:none， 从 而 让 该 元 素 隐藏 而 不 是 显示 出 来 。 


$('.recipe-name').bind('click', function() { 
$('.recipe').hide(); 
1): 


«a href="#" class="recipe-name">Key Lime Pie</a> 
<div class="recipe">Key lime pie is an American dessert made of key lime juice, egg 


yolks, and sweetened condensed milk in a pie crust.</div> 
如 果 和 希望 微调 show 特 效 的 显示 速度 ， 在 调用 show() 方 法 时 可 传人 fast/slow 关 键 词 ， 也 可 
传人 一 个 以 毫秒 为 单位 的 整数 。 


$('.recipe').show('slow'); 


你 也 可 以 传人 一 个 回调 函数 参数 给 .show() 方 法 ， 当 特效 完成 时 会 自动 调用 该 函数 。 
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5.2.1 ”结合 .show() 方 法 和 cookie 让 一 条 消息 在 站 点 上 只 显示 一 


设想 这 样 一 个 情景 : 我 们 需要 向 用 户 显示 一 条 专用 的 提示 或 者 消息 , 且 只 希望 让 他 们 看 到 一 
次 。 我 经 rN ae eae ) 上 看 到 类 似 的 信息 ， E le 
些 新 功能 。 我 们 可 以 使 用 .show() 方 法 ,同时 在 用 户 的 机 右上 种 一 个 cookie， 利 用 这 个 cookie 阻 
止 同 一 用 户 在 同一 台 计 算 机 上 再 次 看 到 这 条 消息 。 

首先 ， 我 们 生成 这 条 消息 并 “ 烘 烤 ”这 块 cookie。 

(1) 为 我 们 想 要 显示 的 消息 准备 HTML， 其 中 有 一 个 链接 ， 用 户 单 击 它 就 可 以 隐藏 消息 。 页 
面 上 还 有 一 个 链接 ， 当 消息 隐藏 之 后 ， 用 户 可 以 通过 单 击 它 再 次 看 到 这 条 消息 。 


«a href="#" class-"special-offer"»View this special offer!</a> 


<div id="message"> 
Special Offer for Members! 50% off your first purchase.<br/> 
<a href="#" class="hide">Hide this message</a> 

</div> 


(2) 准备 用 来 显示 提示 信息 的 click 事 件 处 理 函数 , 它 负 责 显 示 提 示 信 息 , 并 在 显示 完成 后 调 
JH nideMessagePK 2M( 稍 后 我 们 会 编写 这 个 回调 函数 ), 在 该 事件 处 理 函 数 中 ,我 们 选中 #message 
元 素 ， a show() 方 法 。 我 们 在 这 儿 不 需要 duration 人 参数， 直接 把 回调 函数 hidqeMessage 
作为 参数 传递 给 .show() 即 可 。 


$('.special-offer').bind('click', function() { 
S('#message') .show(hideMessage) ; 


1); 
(3) 再 准备 一 个 用 来 隐藏 信息 的 click 事 件 ， 它 负责 隐藏 这 条 消息 ， 并 在 隐藏 完成 后 调用 


hideMessage 国 数 。 


$('.hide').bind('click', function() { 
S('#message') .hide(hideMessage) ; 
F}; 


(4) 接 下 来 ， 我 们 来 编写 hideMessage 回 调 函 数 ， 在 用 户 看 完 提 示 信 息 之 后 ， 它 负责 在 用 户 
计算 机 上 种 一 个 cookie。 


function hideMessage() { 


} 

(5) 创建 一 个 名 为 hiqecookie 的 cookie， 将 它 的 过 期 时 间 设 置 为 30 天 。 我 们 在 这 儿 使 用 了 
JavaScript 中 的 daate 对 象 。 这 是 一 个 很 好 的 混合 使 用 JavaScript 原 生 代 码 与 jQuery 代码 的 例子 。 图 
5$-4 展 示 的 是 Firefox 中 设置 完 该 cookie" 之 后 的 cookie 信 息 截 图 。 


function hideMessage() { 
var expirDate=new Date(); 
expirDate.setDate(expirDate.getDate()-430); 
document.cookie = "name-hideCookie;expires-"-«expirDate.toUTCString(); 


} 


CD jQuery 有 一 个 cookie 搬 件 ， 利 用 这 个 插件 我 们 可 以 更 方便 地 读 取 和 设置 cookie。 
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Cookie Information - http://smashingjquery.com/code/chap06/ 


E 


会 ) ( v CE ;oogQ ba 


© Disable * Æ Cookies + 器 CSS + ©] Forms + Œ Images + @ Information + 


[) Cookie Information - http://smas Dx 


Cookie Information - 
tH http://smashingjquery.com/code/chap06 
/example-showcookie.html# 


Ej Collapse All 由 Expand All 


http://smashingjquery.com/code/chap06/example- 
showcookie.html 


日 1 cookie 


NAME hide Cookie 
VALUE yes 


HOST smashingjquery.com 


PATH Icode/chap06/ 


SECURE No 


EXPIRES Mon, 27 Sep 2010 01:26:59 GMT 


& Edit Cookie 


[mmi 


图 $-4 ”显示 在 Firefox 中 的 cookie 和 它 的 值 


现在 我 们 能 够 做 到 显示 和 隐藏 信息 ， 还 能 设置 cookie。 可 是 该 如 何 响应 那些 已 经 看 过 这 条 信 
息 的 用 户 ?” 如 果 他 们 第 二 天 又 来 这 个 站 点 , 他 们 一 定 不 希望 又 一 次 看 到 这 个 信息 。 我 们 可 以 再 写 
一 个 函数 检测 是 否 存 在 这 个 cookie， 若 cookie 存 在 则 隐藏 这 条 信息 。 在 页 面 1oaq 事 件 发 生 时 ， 我 
们 执行 这 个 函数 ， 正 如 图 5-5 所 示 。 

(1) 声明 一 个 变量 保存 页 面 cookie。 利用 JavaScript 的 cookie 对 象 , 使 用 document .cookie 可 得 
到 一 个 cookie。 


var messageCookie = document.cookie; 
(2) 写 一 个 条 件 语句 检测 messagecookie 是 和 否 有 值 。 若 messagecookie 有 值 则 隐藏 这 条 提示 
AR, BMA. © 


if (messageCookie) { 
// 如 果 消 息 cookie 存 在 ， 则 隐藏 提示 信息 
$('.special-offer').hide(); 

H 

else ( 
// 什么 也 不 做 

} 


(D 此 处 检测 cookie 的 手段 非常 粗放 ， 假 设 该 站 点 并 没有 设 定 hiaecookie 这 个 cookie， 但 有 其 他 用 途 的 cookie， 提 示 
信息 也 会 自动 隐藏 ， 这 显然 是 我 们 不 想 要 的 。 利 用 jQuery 的 cookie 搬 件 可 以 轻松 拿 到 具体 的 cookie。 
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© 0O O Mozilla Firefox 
kala- (8G) & Cft) @ http://smashingjquery.com/code/chap06/example-showreadcookie.html X v) GM Google a) r 
* {2] View Source * {> Options 


@ Disable + Æ Cookies + |. CSS + E] Forms + | Images * @ Information 7 Miscellaneous * 27 Outline + 22 Resize + g” Tools 


1 [] http://smashingj...readcookie.html => 


+ 
Er Console HIMLv | CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 


body - html Style» | Computed Layout DOM 


body { exampl..ie.html (line 5) 


font-family: arial; 


special-offer" href="#" style-"display: none;"» View 


message 


</body> 
</html> 


luz Done # BBA 25.9K 04995 / 


图 5-5 ” 单 击 链接 后 ,链接 和 信息 都 看 不 到 了 


5.2.2 ”切换 元 素 的 显示 状态 (显示 / 隐藏 ) 


有 时 我 们 需要 切换 一 些 内 容 的 显示 状态 ，jQuery 提 供 了 一 个 很 棒 的 解决 方案 ， 即 .toggle()。 


.toggle () 方 法 为 调用 该 方法 的 元 素 的 click 事 件 绑 定 了 一 个 事件 处 理 函 数 ， 让 我 们 能 够 基于 目标 
元 素 的 当前 显示 状态 控制 目标 元 素 的 显示 。 下 面 代码 片段 中 最 重要 的 部 分 是 利用 CSS 使 .recipe 
元 素 隐 藏 。 ( aisplay 属 性 的 值 决定 .toggle() 方 法 如 何 工作 。) 


<style> 
.recipe {display:none; } 
</style> 
$('.recipe-name') .toggle( 
function() { 
$('.recipe').show(); 
), 
function() ( 
$('.recipe') .hide(); 
} 
ps 
«a href="#" class="recipe-name">Key Lime Pie</a> 
<div class="recipe">Key lime pie is an American dessert made of key lime juice, egg 
yolks, and sweetened condensed milk in a pie crust.</div> 
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53 ”滑动 元 素 


在 网 上 冲浪 , 经 常会 见 到 滑动 效果 , 特别 是 在 那些 图 库 类 应 用 中 , 我 们 经 常 看 到 图 片 滑 进 视 
野 或 滑 出 视野 。 此 外 ， 最 近 在 Facebook 和 Twitter 上 流行 的 实时 会 话 ， 在 页 面 上 新 消息 的 滑 人 滑 出 
更 是 司空 见 惯 。 图 $-6 是 Twitter 的 首页 ( twitter .com)， 当 发 表 新 消息 时 ， 新 消息 就 以 滑动 的 方 
式 显 示 出 来 。 每 发 表 一 条 消息 ， 这 条 消息 就 从 项 上 滑动 下 来 ,将 页 面 上 原 有 的 消息 向 下 推 , 一 条 
接 一 条 ， 直 到 请 出 视野 范 目 


puy 


o 


AAO Twitter © 


ia- Ce Cx) (会 ) GE hip; /twitter.com/ Wr) GEL coooe Q) i&* 
@ Disable + Æ Cookies + LJ CSS + E] Forms + 


t Twitter (ee) 


Æ Images + @ Information + — Miscellaneous * -7 Outline + ŽŽ Resize * gP Tools + $+) View Source + J> Options 


Have an account? Sign in ie 


lewitteg — 


Discover what's happening right now, anywhere in the world Twitter is a rich source of 
instant information. Stay 
updated. Keep others updated. 
It's a whole thing. 


See who's here Top Tweets view ail» Signup» 


Customize Twitter by choosing 
who to follow. Then see tweets 


from those folks as soon as 
they're posted. 


OurWinnerJosie In 10 years time we wont b tellin our kids 

cinderella and snow white we'll be tellin them bout #Triple) 

Wil. /HAPPYBIRTHDAYJOHNJAMES Using Twitter for a business? 
aiaia Check out Twitter 101 


Friends and industry peers you 7 Astro Wheels ‘Hurricane Danielle’ - as we passed directly 
know. Celebrities you watch. ail overhead this evening in the central Atlantic. I’m not a tropical 
Businesses you frequent. Find ^. W^ sto http:/ /twitpic.com/2isdbk 

them all on Twitter. 5 t 


© 2010 Twitter AboutUs Contact Blog Status Goodies API Business Help Jobs Terms Privacy Language: English v 


区 Done 


© 2010, Twitter ( www.twitter.com ) 
图 5-6 “在 发 表 新 消息 时 ，Twitter 首 页 使 用 了 滑动 效果 


.slideDown () 和 .slideUp() 方 法 的 用 法 与 .show() 和 .hige() 完 全 相同 。 选 中 某 个 元 素 ， 
然后 调用 方法 ， 一 样 有 两 个 同样 含义 的 可 选 参数 ( 持续 时 间 和 回调 函数 )。 不 过 这 两 个 方法 的 名 
字 常 常会 让 jQuery 新 手 犯 糊涂 。. slideDown() 方 法 使 元 素 由 不 可 见 变 为 可 见 , 而 .slideUp() 则 
相反 。 


$('.message').slideDown(); 


5.4 使 用 .slidqeTroggle() 方 法 显示 蔡 代 搜索 项 
搜索 已 成 为 网 上 不 可 或 缺 的 一 部 分 , 很 大 程度 上 , 谷歌 正 是 依靠 搜索 成 为 今日 世界 知名 的 公 
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司 。 每 个 人 进行 搜索 时 ,都 期 望 能 在 你 的 站 点 上 轻松 找到 他 想 要 的 东西 。 构 建 一 个 更 好 的 用 户 界 
面 , 让 用 户 能 在 弹指 之 间 找 到 所 有 ( 他 们 想 要 的 ) 东西 , 会 是 一 个 很 重要 的 改进 。Mozilla 有 一 个 
庞大 的 开发 者 社区 为 Firefox 浏 览 器 编写 扩展 。 图 5$-7 是 一 个 搜索 栏 ， 包 括 高 级 选项 。 当 你 单 击 高 
级 选项 ， 搜 索 栏 的 高 级 选择 列表 就 请 下 来 ,这 是 一 个 很 好 的 体验 ,不 用 刷新 页 面 就 扩展 了 搜索 选 
项 。 使 用 jQuery 的 .slideToggle() 方 法 可 以 轻松 实现 这 种 效果 。 


Firefox File Edit View Histo ookmarks Tools Window Help — — 
Firebug :: Add-ons for Firefox 


ar Oe 


LE Register or Login ^ Other Applications ~ 


Add-ons for & Firefox 
search for add-ons within > 


Add-ons for Firefox > Extensions > Firebug Platform 


x* Firebug 1.5.4 


by Joe Hewitt, johnjbarton, robd 


Firefox Version 


Any 


Sort By Keyword Match | Per Page 20 z 


at your fingertips while you browse. You can edit, debug, and 
monitor CSS, HTML, and JavaScript live in any web page... 


<div class="blogPost"> 
<div class="imageHeader 
«div style-"float: rigl 


«p class="Lead">FireBi 


<p>FireBug is fairly s 


<ul> 
«h2 level="2">Other Fu + © Add to Firefox 


Share this Add-on 


Firebug 1.5 requires Firefox 3.5 or higher. 


Updated May 6, 2010 

à Need help with this 
Website http://getfirebug.com/ add-on? 
Works with Firefox 3.5 - 3.6.* = Visit the support sit 


843/?advanced=on_ ae 


图 5-7 ”Firfox 插 件 站 点 的 高 级 搜索 选项 的 请 动 效果 


,slideroggle() 方 法 的 用 法 与 .teggle () 非 常 相似 ， 都 用 于 显示 和 隐藏 元 素 。 假 设 目标 元 
素 现在 可 见 , 调用 .slideTroggle() 则 该 元 素 就 会 滑 上 然后 消失 , 否则 该 元 素 就 滑 下 并 显示 出 来 。 

$('.message').slideToggle(); 

下 面 这 个 解决 方案 中 ， 我 教 你 使 用 .sliqeroggle() 创 建 一 个 支持 滑动 效果 的 高 级 搜索 沫 
单 ， 和 图 5-7 中 的 例子 类 似 。 

(1) 准备 搜索 输入 框 及 高 级 选项 的 HTML: 


<style> 

body {font-family:arial;} 

.advanced {display:none; 
padding:3px; 
border:1px solid #ccc; 
width: 300px; 

} 
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</style> 
<div id="search"> 
<hi>Johnny's Superstore</h1> 
<input type="text" width="60" /> 
<input type="submit" value="search"/><br> 
<a href="#" class="advanced-search">Advanced Search</a> 
<div class="advanced"> 
<input type="radio" name="category"/> Clothing<br/> 
<input type="radio" name="category"/> Electronics<br/> 
<input type="checkbox" name-"sale"/» Clearance Only<br/> 
</div> 
</div> 


(2) 选中 .aqvancedq-search 元 素 ， 并 为 它 绑 定 click 事 件 处 理 函 数 。 在 事件 处 理 函 数 中 ， 选 
中 .advanceq 元 素 并 调用 . slidqeToggle () 方 法 。 


$('.advanced-search') .bind('click',function() { 
$('.advanced').slideToggle(); 


3); 

每 单 击 一 次 Advance-Search ( 高 级 搜索 ) 按钮 ， 高 级 搜索 选项 就 会 根据 页 面 加 载 后 高 级 选项 
的 状态 滑 上 或 者 滑 下 。 在 本 例 中 ， 我 们 使 用 CSS 样 式 让 高 级 选项 元 素 在 页 面 加 载 时 隐藏 。 图 5-8 
展示 的 是 Firebug 在 Firefox 浏 览 器 中 的 输出 。 类 似 .hidqe() 和 .show() 方 法 ,jQuery 通过 给 元 素 添 
加 行内 样式 aisplay:block 让 元 素 显 示 出 来 。 


@ Firefox File Edi ew History Bookmark 00 Window Help Ee 加 © 2 D (T 0:41) Fri9:42PM Q 
eoo Mozilla Firefox c 
[4 [ ( http://smashingjquery.com/code/chap06/example-searchslide.htmlst wy 29s Google a) e 

Disable = |_| Forms * # Image L) Informa ___ Miscellaneous + _/ Outline esize © Tools + |. | View Source 
B er 

' 
Johhny's Superstore 
Gearch) 
Advance YSearct 

O Clothing 
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FE Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity — YSlow 
&$ i Edit : body < html 


V <html> 


b <head> 
TEUER ex LLL LL Ong 
«div id="search"> 


«hi» Johhny's Superstore «/hi» 
<input type="text" width="60"> 
<input type="submit” value="search"> 


Style | Computed Layout DOM 
bod, exampl..e.htmli (line 5) 
font-family: arial; 


<br> 
«a class-"advanced-search" href="#"> Advanced Search</a> 
> «div class-"advanced" style="display: block;"> 
</div> 
</body> 
</html> 


图 $-8 Firebug 在 Firefox 中 的 输出 ， 类 似 .show() 和 .hide() ，jQuery 通 过 给 元 素 添 加 
行内 样式 display :block 让 元 素 显 示 出 来 
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55 元素 淡 入 淡出 


淡 入 淡出 效果 使 站 点 元 素 之 间 的 交互 又 深入 一 层 。 淡 入 淡出 这 种 过 渡 效 果 最 常见 于 图 库 应 
FA, 或 者 图 片 相册 。 在 这 些 应 用 中 , 一 张 图 片 淡出 而 另 一 张 图 片 淡 入 。 在 几 年 前 要 想 达 到 这 种 效 
果 ， 如 果 不 用 Flash 创 建 动 画 效果 的 图 片 相册 ， 就 只 能 使 用 高 级 JavaSceript 编 写 许多 许多 代码 。 

jQuery 使 得 无 需 直 接 与 原生 JavaScript 那 难以 理解 的 API 打 交道 ， 就 能 用 上 JavaScript 原 生效 
果 。 多 亏 jQuery 引进 了 这 些 效果 ， 如 今 同样 动画 效果 的 图 片 相 册 才 能 够 用 JavaScript 实 现 。 使 用 
JavaScript 而 不 是 Flash 实 现 图 片 相册 还 有 一 个 额外 的 好 处 ， 那 就 是 你 的 应 用 对 搜索 引擎 更 加 友好 
(SEO )， 因 为 不 是 所 有 的 搜索 引擎 都 能 对 Flash 文 件 内 的 内 容 建立 索引 。 

用 于 在 网 页 上 实现 淡 入 淡出 效果 的 一 个 关键 CSS 属 性 是 opacity ( 见 图 5-9 )。opacity 属 性 
的 取 值 范围 为 0 ~ 100 的 整数 值 或 者 0.0 ~ 1.0 的 小 数值 ，. £adern () 和 . fadeout () 方 法 "都 使 用 
了 这 个 属性 。 


图 5-9 ”图 中 图 片 正 使 用 opacity 属 性 淡出 


.fadeIn() 方 法 的 用 法 与 .show() 方 法 一 样 。 它 也 接受 两 个 可 选 的 参数 一 一 quration 和 
callback。 其 中 qduration 参 数 以 毫秒 ( 如 600、200、700 等 ) 为 单位 ， 它 决定 动画 速度 
( fast/slow )。callback 人 参数 是 一 个 回调 函数 ， 该 函数 在 特效 结束 后 会 立刻 执行 。 

$(selector).fadelIn(duration, callback) 

.fadeout () ri: . fadeIn () 方 法 几乎 完全 相同 ,不同 的 是 它 使 选 定 元 素 淡出 。 

$(selector) .fadeOut (duration, callback); 

. £adeTo () 方 法 允许 我 们 指定 目标 元 素 淡 入 /淡出 的 目标 透明 度 : 


$(selector).fadeTo(duration, opacity, callback); 


5.6 ”使 用 淡 入 / 淡出 效果 建立 一 个 简单 的 图 库 


为 演示 淡 入 淡出 在 站 点 上 的 应 用 , 在 本 节 我 将 从 头 构建 一 个 简单 的 图 库 。 图库 中 有 5 张 图 片 ， 
和 一 个 可 以 单 击 以 更 换 图 片 的 数字 列表 。 在 更 换 图 片 时 ， 当 前 图 片 淡 出 ,选中 的 图 片 淡 入 。 为 便 
于 讲解 ， 我 将 脚本 拆 分 成 多 个 部 分 ， 这 样 你 就 能 看 清 构建 图 库 的 每 一 个 步 又， 使 脚本 更 灵活 。 

(1) 首先 准备 基础 HTML。 我 使 用 jQuery 添加 图 片 相册 必需 的 HTML， 因 此 这 个 脚本 非常 容易 
安装 部 署 : 


(D WA . £adeTo 0 WH. 
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<div class="container"> 
«hi»jQuery Images Galore.</h1> 


</div> 
(2) 接 下 来 ， 准 备 图 片 库 的 样式 表 ， 确 保 图 库 在 页 面 中 的 布局 正确 : 
body { 
font-family:arial; 
} 
ul#nav { 


list-style-type:none; 
margin:10px 0 10px; 
padding: 0;} 


ul#nav li { 
float:left; 
width: 30px; } 


ul#nav li a {text-decoration:none; 
background: #05609A; 
color:#fff; 
padding: 5px; } 


ul#nav li a.active { 
background: #B4F114; 
} 


.Slide-image (width:400px; 
height:300px; 
border:2px solid #05609A; 
overflow:hidden; 


} 


.Slide-image img { 
display:none; 
H 
(3) 创建 一 个 数组 变量 sligqeArray, 存放 所 有 图 片 的 名 字 。 我 们 会 根据 这 个 数组 创建 导航 链 
接 : 有 多 少 张 图 片 ， 就 创建 多 少 个 链接 。 我 们 随时 可 以 根据 需要 调整 这 个 数组 元 素 的 个 数 ， 脚 本 
会 自动 地 在 页 面 上 添加 或 减少 图 片 。 
var slideArray = [ 
"ansel_adamsl.jpg", 
"ansel_adams2.jpg", 
"ansel adams3.jpg", 
"ansel adams4.jpg", 


"ansel adams5.jpg" 


l; 
我 们 还 需要 创建 一 个 变量 imgDpir", 保存 图 片 相册 中 图 片 所 在 的 目录 , 这 个 目录 既 可 以 是 相 
对 路 径 , 也 可 以 是 绝对 路 径 。 在 稍 后 准备 好 本 解决 方案 中 图 片 相册 中 的 图 片 时 ,这 个 变量 会 被 包 


虽然 这 个 变量 名 叫 imgpiz， 作 者 也 说 它 保存 的 是 图 片 目录 ,但 它 存放 的 不 仅仅 是 图 片 所 在 目录 ， 还 包括 文件 名 
的 前 级 。 
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含 在 ( 图片 文件 名 ) 内 。 

var imgDir = 'images/ansel adams'; 

(4) 在 容器 元 素 内 添加 图 库 元 素 。 这 个 新 添加 的 .sliae-image 元 素 用 来 存放 稍 后 添加 进来 的 
全 部 图 片 。 

$('.container').append('«div class="slide-image"></div>'); 

(5) 准备 好 .slide-image 元 素 之 后 ， 我 们 需要 在 该 元 素 中 放 一 张 图 片 ， 以 便 在 页 面 加 载 完 
成 之 后 显示 它 。 

$('.slide-image') .html('<img src-"images/'*slideArray[0]*'"/»'); 

(0) 在 .slide-image 元 素 之 后 添加 一 个 无 序列 表 元 素 nav， 用 作 导 航 。 这 个 无 序列 表 包 含 图 
片 相册 中 所 有 图 片 的 链接 。 

$('.slide-image').after('«ul id="nav"></ul>'); 

(7) 根 据 slideArray 的 length 属 性 确定 sligeArray 中 一 共有 多 少 图 片 ， 并 将 它 的 值 存放 于 


变量 slideLength 当 中 。 


var slideLength = slideArray.length; 

(8) 构建 一 个 for 循 环 ， 壕 代 处 理 slideArray 中 的 每 一 个 项 。 该 循环 使 用 sligqeLength 变 量 
限制 循环 次 数 ， 在 本 例 中 循环 体 共 运行 5 次 。 

for(i=0; i < slideLength; i++) { 

j 

(9) 由 于 数组 中 共有 5 项 ， 因 此 slidaeLength 的 值 为 5?。 我 新 建 了 一 个 变量 slidqeText， 并 
将 它 的 值 设置 为 1 + i (循环 变量 )。 这 就 确保 了 链接 文本 从 1 到 5， 而 不 是 从 0 到 4。 

for(i=0; i <= slideLength; i++){ 

var slideText = i+ 1; 


} 
(10) 接 下 来 我 们 利用 第 (5) 步 添加 到 DOM 中 的 导航 元 素 nav ,为 数组 中 的 每 一 张 图 片 生成 一 个 
1i 元 素 ， 并 将 它 追 加 到 #nav 元 素 中 。 每 个 1i 中 包含 一 个 a 标签 ， 我们 使 用 这 个 a 标签 的 rel 属 性 
保存 一 份 slideText， 同 时 sl1ideText 也 作为 a 元 素 的 链接 文本 。 我 将 利用 rel 属 性 来 确定 要 插 
入 哪 张 图 片 。 图 $-10 显 示 的 是 在 浏览 器 中 执行 循环 结束 后 ， 使 用 Firebug 看 到 的 HTML 结 果 。 
for(i=0; i < slideLength; i++) { 
var slideText = i+ 1; 
S('#nav') .append('<li><a href="#" rel="'+slideText+'">'+slideText+'!</a></li>'); 


} 
(11) 在 创建 导航 列表 之 后 ， 我 们 需要 为 每 个 链接 元 素 绑 定 click 事 件 。 我 们 使 用 .bina () 77 
法 把 事件 处 理 函 数 绑 定 到 导航 链接 元 素 的 click 事 件 : 


$('#nav li a').bind('click', function()( 


1); 
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Mozilla Firefox 


GE Cx) Gf) CL hitp://smashingjquery.com/code/chap06/example-fading.html wv) QM co Q) w- 


@ Disable + Æ Cookies + .j CSS + ©] Forms + S Images + @ Information + C Miscellaneous + -7 Outline » 22 Resize + gP Tools + {2) View Source * ¿© Options 
ID http:/ /smashingj...ple-fading.html 


jQuery Images Galore. 


+ ap Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 
好 | Edit © body < html Stylev Computed Layout DOM 
> <head> ^| body { exampl..ng.html (line 5) 
v 


«div class="container"> t: 


Y <div class-"slide-image"» 
img src=" images/ansel_adams1. jpg’ 
</div> 
«ul id="nav"> 
<li> 
<a rel="1" href="#">1</a> 


Y 


vvYvYv 
NA T 


# BA 105.6k 0.563s | 


图 $-10 ”循环 结束 后 ， 使 用 Firebug 看 到 浏览 器 中 的 HTML 结果 


(12) 新 建 一 个 变量 numslide, 用 它 保 存 *el 属 性 的 值 。 这 个 变量 当 且 仅 当 数字 链接 被 单 击 时 
才 会 被 赋值 ; 换言之 ， 赋 值 行为 发 生 在 事件 发 生 时 ， 而 非 绑 定 时 。 
$('#nav li a').bind('click', function() { 


var numSlide = $(this).attr('rel'); 
1): 


(13) 选中 .slide-image 元 素 ， 然 后 插入 一 个 图 片 元 素 ， 并 使 用 imgDir 变 量 和 numslide 变 
量 拼 出 正确 的 图 片 src 属 性 。 这样 ， 当 click 事 件 发 生 时 ,就 能 在 .slide-image 元 素 内 添加 上 正 
确 的 图 片 。 
$('tnav li a').bind('click', function() { 
var numSlide - $(this).attr('rel'); 


$('.slide-image').html('«img src="'+imgDir + numSlide+'.jpg"/>'); 


py 

(14) 当 单 击 一 个 链接 后 ， 如 果 能 告诉 用 户 单 击 的 是 哪个 链接 ， 无 疑 会 获得 加 分 。 为 此 我 额外 
添加 了 两 条 语句 。 第 一 条 移 除 导航 菜单 中 所 有 链接 的 active 类 ( 上 一 次 单 击 的 链接 )， 第 二 条 语 
句 为 正 被 单 击 的 链接 添加 active 类 。 


$('#nav li a').bind('click', function() { 
var numSlide = $(this).attr('rel'); 
$('.slide-image').html('«img src="'+imgDir + numSlide+'.jpg"/>'); 
$('#nav li a').removeClass('active'); 
$(this).addClass('active'); 
1); 
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好 了 , 现在 你 已 经 学 会 如 何 创 建 一 个 最 简单 的 图 库 了 。 接 下 来 我 们 添加 淡 和 淡出 效果 , 让 这 
个 图 库 像 模 像 样 。 ii 

(15) 选中 .sliae-image 的 图 片子 元 素 ， 然 后 调用 . £adern () 方 法 。 

$('tnav li a').bind('click', function() { 


var numSlide = $(this).attr('rel'); 
$('.slide-image').html('«img src="'+imgDir + numSlide-'.jpg"/»'); 


$('.slide-image img').fadeIn(); 
$('tnav li a').removeClass('active'); 
$(this).addClass('active'); 


n; 
(16) 为 确保 页 面 加 载 完 时 显示 第 一 张 图 片 ， 选 中 导航 的 第 一 个 链接 ， 主 动 触发 一 次 click 
事件 : 


S('#nav li a').eq(0).click(); 


5.7 ”使 用 延迟 创建 定时 执行 的 动画 


由 于 动画 往往 是 在 给 定时 间 帧 内 发 生 的 一 系列 事件 , 通过 元 素 延迟 创建 定时 执行 的 动画 是 一 
个 很 基础 的 需求 。jQuery 提 供 了 一 个 .delay() 方 法 ,为 延迟 一 段 时 间 执 行动 画 提供 了 一 种 解决 
方案 

只 有 1.4 版 本 或 更 新 的 jQuery 才 有 .delay () 方 法 。 它 延迟 指定 的 时 间 ， 然 后 再 执行 链接 其 后 
的 方法 。 这 个 延迟 方法 仅 适 用 于 jQuery 库 的 特殊 效果 。 如 果 你 需要 一 个 更 灵活 的 定时 器 函数 ， 不 
Wy ikinJavaScript AA set Timeout MA. 

如 果 和 希望 显示 一 条 消息 给 用 户 ， 然 后 过 上 一 段 时 间 让 消息 自动 消失 ， 使 用 .aelay() 方 法 就 
非常 合适 。 在 下 面 这 个 例子 里 ,我 希望 当 用 户 将 鼠标 悬 停 在 某 个 链接 上 时 显示 一 条 消息 ， 当 用 户 
离开 这 个 链接 之 后 ， 等 上 10 秒 再 让 这 条 消息 淡出 。 

(1) 准备 ( 包 着 提示 信息 的 ) tooltip 元 素 的 HTML 以 及 用 于 鼠标 悬 停 的 目标 元 素 C 鼠标 悬 停 
在 该 元 素 之 上 时 显示 提示 信息 )。 

<a href="#" class-"show-tip"»Learn more about Peaches</a> 
<div class="tool-tip"> 
Although its botanical name Prunus persica suggests the peach is native to Persia, 
peaches actually originated in China where they have been cultivated since the early 
days of Chinese culture. Peaches were mentioned in Chinese writings as far back as the 
10th century BC and were a favoured fruit of kings and emperors. Recently, the history 
of cultivation of peaches in China has been extensively reviewed citing numerous 


original manuscripts dating back to 1100 B.C. 
«/div» 


2) 接 下 来 ， 绑 定 hover 事 件 处 理 函 数 。 hover 事 件 内 部 使 用 了 mouseenter 和 mouseleave 事 
件 。 第 一 个 参数 ( 回调 函数 ) 在 mouseovez 事 件 发 生 时 调用 ， 选 中 .tool1-tip 元 素 ， 在 900 ms 的 
时 间 内 采用 淡 入 效果 显示 出 来 。 


5.8 ” 链 式 调用 多 个 效果 


101 


$('.show-tip').hover( 
function() { 
$('.tool-tip').fadeIn(900); 


) 


233 


function() { 


Q) 第 二 个 参数 C 回调 函数 ) 在 mouseleave 事 件 发 生 时 调用 。 不 过 这 次 没有 马上 淡出 ， 而 是 


先 延迟 了 10 000 ms ( 10s) 钟 ， 然 后 用 900 ms 的 时 间 淡 出 。 


$('.show-tip').hover( 
function()( 


SC 
} 


1); 


.tool-tip').fadeIn(900); 


function() ( 
$('.tool-tip').delay(10000).fadeOut(900); 


5.8 链 式 调 用 多 个 效果 


现在 你 该 很 熟悉 jQuery 的 链 式 调用 了 。 链 式 调 用 允许 在 一 条 语句 中 顺序 调用 多 个 方法 。 这 使 
得 代码 更 少 并 且 能 提高 脚本 的 性 能 。 
在 下 面 这 个 例子 中 ,我 使 用 链 式 调用 语法 演示 在 一 个 选择 絮语 句 中 调用 多 个 方法 。. tool-tip 


元 素 先 被 隐藏 ， 接 着 在 900 ms 的 时 间 内 淡 入 。 经 过 1 s 的 延迟 之 后 ， 它 又 花 了 900 ms 淡出 。 


$('.tool-tip').hide().fadeIn(900).delay(1000).fadeOut(900); 


如 果 不 使 用 链 式 调用 ， 就 需要 以 下 3 条 语句 : 


$('.tool-tip').fadeIn(900); 
$('.tool-tip').delay(10000); 
$('.tool-tip').fadeOut(900); 


这 3 条 语句 的 效果 与 前 面 链 式 调用 的 一 条 语句 效果 完全 相同 ， 但 链 式 调用 节省 了 代码 ， 并 且 


让 代码 更 干净 。 设 想 这 样 一 个 场景 : 使 用 3 个 不 同 的 元 素 ID 选择 3 个 1 元 素 , 并 给 它们 设置 不 同 的 


样式 : 


<ul id=" 


«l3 
«li 
«li 
«li 
«li 
</ul> 


有 两 种 方式 完成 这 件 事 。 第 一 种 ， 如 下 所 示 ， 写 3 条 语句 ， 每 次 选中 一 个 元 素 并 设 定 样式 : 


$('#politics').css('border','lpx solid red'); 
$('#finance').css('display','none'); 
$('#local').css('border','lpx solid green'); 


news "> 
id="politics">Politics</li> 
id-"sports"»Sports«/li» 
id="finance">Finance</1li> 
id="world">World</1li> 
id-"local"»Local«/li» 
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AbH 


第 二 种 则 利用 .ena() 方 法 实现 所 有 元 素 和 方法 的 链 式 调用 。.ena() 方 法 能 得 
操作 结果 集 的 jQuery 对 象 ， 从 而 让 其 后 链接 的 方法 不 受 .ena O 函数 之 前 选择 器 的 影 
示 的 是 用 链 式 调用 " 重 写 上 面 代码 后 的 运行 结果 ?。 


$s('#news') .find('#politics') .css('border','1lpx solid red').end().find 
('#finance') .-hide().end().find('#local').css('border','1lpx solid blue'); 


Mozilla Firefox 


a 
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Politics 
Sports 
” 

World 
Local 
+ E Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity — YSlow eco 
kB | Edit body - html Style» | Computed Layout DOM 
Y <html> f^] | body { exampl..in.html (line 5) 

> <head> font-family: arial; 

Bd 

«hi» 


jQuery Images Galore. 
Y <div class="container"> 
V <div id-"nens"> 
div class-"politics" 
«div class="sports"> Sports < 
d l t 


style="border: 1px solid red;">Politics</div> 
/div» 
display: non 


«div class="world">World </div> 
<div class="Local" style="border: 1px solid blue;">Local </div> 
/div> 
/div> 
</hl> 
hndus. 
liz Done # BBA 33.9k 0.634s 


图 5-11 用 链 式 调 用 方法 重 写 上 面 的 代码 示例 后 的 最 终结 


5.9 使 用 多 种 特效 创建 一 个 新 闻 阅 读 器 


到 包含 上 一 步 
响 。 图 5-11 展 


随 着 通过 RSS 投 递 新 闻 内 容 日 渐 普 及 ， 


新 闻 阅 读 右 这样 的 小 工具 越 来 越 常 见 。 新 闻 阅 读 器 既 


可 以 是 一 个 可 在 页 面 重新 加 载 时 随时 刷新 显示 10 篇 文章 的 方 框 , 也 可 以 是 相当 高 级 的 类 似 谷 歌 实 


时 搜索 引擎 〈 图 5-12 ) 那样 支持 实时 更 新 的 


CD 下 面 这 个 例子 中 的 链 式 调 月 


目 有 点 刻意 而 为 的 意思 。 


新 闻 阅 读 顺 。 


实 就 这 个 例子 来 说 ,分 开 写 代码 更 清楚 , 代码 量 也 更 少 。 


译 者 认为 链 式 调用 是 jQuery 提供 的 福利 ， 如 二 


链 式 调 用 写 出 来 更 清楚 ， 我 们 就 用 链 式 调用 ， 否 则 ， 我 们 就 分 


开 写 。 
@) 虽然 默认 看 不 型 


4， 但 jQuery 会 在 jQuery 对 象 中 缓存 上 一 步 的 结 生 


H, 
Ns 


以 备 不 时 之 需 。 
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manchester united - Google Search = 
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图 $-12 ”谷歌 实时 搜索 引擎 (来自 Twitter 的 新 内 容 随 时 滑动 显示 出 来 ) 


下 面 我 来 做 一 个 抓 取 项 态 内 容 的 简单 新 闻 阅 读 器 , 这 个 阅读 器 使 用 了 淡 入 和 滑动 特效 。 我 们 
可 以 扩展 这 个 新 闻 阅 读 器 以 便 支 持 实 时 RSS feed 或 者 做 一 些 优 化 ， 不 过 现在 这 个 简单 版 本 用 来 教 
学 已 经 足够 了 。 

(1) 第 一 步 ， 生 成 基本 的 HTML 结构。 我 们 的 目标 是 让 新 闻 阅 读 器 尽量 灵活 ， 这 样 它 就 能 够 
放 到 任意 一 个 页 面 而 无 需 修改 页 面 。 在 本 例 中 , 我 先 创建 了 一 个 带 hl 元 素 的 页 面 ,， 稍 后 我 会 使 用 
选择 器 把 新 闻 阅 读 器 的 代码 扔 到 这 个 页 面 中 去 。 


<body> 
<hi>jQuery Latest News</h1> 
</body> 
(2) 我 在 数组 变量 newsarravy 中 存放 了 10 个 文章 标题 。 新 闻 阅 读 需 会 遍历 这 些 静 态 内 容 。 
var newsArray = [ 


"Delhomme, Wallace sharp early for Browns", 

"Bucs expect to have injured QB Freeman for opener", 
"Report: Haynesworth likely has rhabdomyolysis", 

"QB Orton effectively leading Broncos in preseason", 
"Vernon Gholston not offended by set-up fight", 
"Cubs' Piniella to retire after Sunday", 

"Bradley interested in Aston Villa job", 

"Federer beats Fish for Cincinnati title", 

"Garcia 3-hits Giants, Cardinals roll 9-0", 

"Cano, CC power Yankees over M's 10-0" 

J; 
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(3) 创建 两 个 变量 ;newsLength 保 存 文章 数量 ,也 就 是 newsArray 的 长 度 ; newsInterval 
变量 存放 一 个 以 毫秒 为 单位 的 数值 , 它 定义 过 多 长 时 间 抓 取 新 的 文章 标题 并 放 到 新 闻 阅 读 器 中 。 


var newsLength = newsArray.length; 
var newsInterval = 2000; 


(4) 选中 h1 元 素 ， 并 在 它 后 面 添 加 一 个 无 序列 表 news-feeq。 

S(th1l').after('<ul id="news-feed"></ul>'); 

(5) 生成 一 个 for 循 环 , 遍历 newsArray 中 的 标题 。 针对 每 一 个 标题 , SIM 14 CHK LE 
这 个 标题 。 

for(i=0; i < newsLength; i++){ 


$('tnews-feed').append('«li»'-«newsArray[i]-*'«/li»'); 


) 

(6) 接 下 来 ， 编 写 一 个 slideHeadline() 函数 ， 它 包含 所 有 的 特效 ， 让 新 闻 阅 读 需 可 用 。 这 
个 函数 体 的 第 一 条 语句 选中 无 序列 表 news-feedq 中 的 最 后 一 个 11 元 素 ， 克 隆 它 ， 再 使 
用 .prepena () 方 法 把 克隆 得 到 的 1i 元 素 添加 到 新 闻 列 表 的 最 前 头 〈 并 让 它 隐 藏 )。 


function slideHeadline() { 
$('#news-feed li:last').clone() .prependTo('#news-feed') .hide(); 


} 
(7) 函数 体 的 第 二 条 语句 选中 上 一 步 克隆 的 元 素 , 然后 调用 .sliaepown () 方 法 让 它 以 滑动 方 
式 显示 出 来 。 


function slideHeadline() { 
$('#news-feed li:last').clone() .prependTo('#news-feed') .hide(); 
$('#news-feed li:first').slideDown(); 


} 
(8) 我 希望 第 一 个 条 目 用 500 ms 的 时 间 滑 下 ,还 希望 它 用 1000 ms 的 时 间 以 淡 入 方式 显示 出 来 。 
我 在 包含 slideDown 方 法 调用 的 同一 条 语句 中 利用 链 式 调用 添加 . fadeIn ()。 


function slideHeadline() { 
$('#news-feed li:last').clone() .prependTo('#news-feed').css('display','none'); 
$('tnews-feed li:first') .fadeIn(1000) .slideDown (500) ; 


} 
(9) sLidetieadlinePR NY Ala — Ai ALF FRIR P IL 3X3 2T] — RI AR 
的 执行 ， 如 图 5-13 所 示 ， 极 好 地 模拟 了 滑动 和 淡 入 效果 。 


function slideHeadline() { 
$('#news-feed li:last').clone() .prependTo('#news-feed').css('display','none'); 
S('#news-feed 1li:first') .fadeIn(1000) .slideDown (500) ; 
$('tnews-feed li:last').remove(); 


} 
(10) 最 后 一 句 JavaScript 代 码 至 关 重 要 。 我 需要 利用 原生 JavaScript 函 数 setInterval 以 固定 
的 时 间 间 隔 ( 2000 ms ) 不 断 执 行 sl1ideHeadline 子 数 。 没 有 这 个 函数 ， 新 闻 阅 读 器 无 法 工作 。 


setInterval(slideHeadline, newsInterval); 
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Firefox File Edit View Hist Bookmarks Tools Window _ Heli E eA 
eoo 


a) Ce ) Co) Gf) CL) hip://smashingiquery.com/code/chap06/example-newsfeed2.htmt rv CRY coooe aj 


:58) Fri 10:13PM_Q 
Mozilla Firefox O 


jQuery Latest News 


Cubs Piniella to retire after Sunday 


Bradley interested in Aston Villa job 


Federer beats Fish for Cincinnati title 


Garcia 3-hits Giants, Cardinals roll 9-0 


Cano, CC power Yankees over Ms 10-0 


Delhomme, Wallace sharp early for Browns 


Done YSlow. 


[15-13 ”顶部 不 断 有 新 元 素 淡 入 ， 同 时 底部 元 素 不 断 被 删除 的 效果 图 


setInterval 了 六 数 是 一 个 原生 JavaScript 定 时 需 函 数 。 它 允许 我 们 指定 一 个 函数 和 一 个 时 间 间 
隔 ， 时 间 一 到 ， 枯 数 立 即 执行 。 这 一 点 类 似 于 另 一 个 JavaScript 定 时 器 郴 数 setTimeout， 二 者 最 
大 的 区 别 在 于 setInterval 在 你 通知 它 停止 前 会 不 间断 地 ( 隔 上 指定 的 时 间 ) 执行 指定 的 函数 ， 
而 setTimeout 只 执行 一 次 。clearTimeout () KA H KK setTimeout () 产 生 的 定时 需 ， 
clearInterval () 则 用 来 取消 setInterval () 产 生 的 定时 器 。jQuery 库 正 是 使 用 setTimeout 和 
setInterval 困 数 才 实 现 了 其 异常 强大 的 特效 API。 


5.10 ”创建 高 级 动画 
jQuery 有 一 个 .animate() 方 法 ， 我 们 可 以 利用 它 生成 自 定义 动画 。 与 链 式 调用 faae 系 列 、 


slide 系 列 和 show 等 作用 范围 有 限 的 方法 不 同 ，.animate() 方 法 允许 我 们 使 用 任意 的 可 通过 数 
值 动态 控制 的 CSS 属 性 。 表 5-2 列 出 了 .animate() 方 法 可 用 的 CSS 属 性 。 


表 5-2 可 用 于 .animate() 方 法 的 常见 CSS 属 性 


CSS 属 性 示 例 值 
opacity 0.5 

top 10 px 
height 100 px 
width 200 px 
margin 10 px 
padding 


15 px 
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5.10.1 使 用 高 级 动画 创建 一 个 带 文本 说 明 的 图 库 


我 以 前 一 直 使 用 Flash 和 ActionScript， 大 约 两 年 前 决定 改变 方向 ， 开 始 更 多 地 使 用 JavaScript 
和 jQuery。 之 所 以 会 做 这 样 的 决定 ， 有 两 个 原因 ， 一 个 是 JavaScript 对 DOM 的 控制 能 力 越 来 越 强 ， 
另 一 个 是 一 些 移动 平台 如 记 hone 不 支持 Flash 和 ActionScript。Flash 非 常 擅长 处 理 高 级 动画 ， 不 过 
基于 JavaScript 图 库 的 应 用 已 经 取得 长 足 进 展 。 在 学 习 ActionScript 的 过 程 中 ， 我 最 大 的 收获 是 发 
现 这 两 种 语言 ( JavaScript 和 ActionScript ) 在 处 理事 件 和 特效 上 相当 一 致 。"” 

理解 编程 语言 背后 的 基本 原理 对 学 习 一 门 新 语言 有 极 大 的 帮助 , 因为 绝 大 多 数 概念 都 是 一 样 
的 ; 有 变化 的 仅仅 是 语言 的 语法 。ActionScript 3 和 JavaScript 都 基于 ECMAScript， 因 此 它们 有 许 
多 相似 之 处 。 由 于 JavaScript 的 语法 和 习惯 与 ActionScript 如 此 接近 ， 在 使 用 JavaScript 的 过 程 中 我 
不 止 一 次 有 “熟识 ”之 感 。 

2006 年 , 我 使 用 Flash 8 编写 了 自己 的 第 一 个 由 XML 驱动 的 动画 效果 的 图 片 相册 。 那 是 一 个 相 
当 灵 活 的 小 应 用 。 你 提供 一 个 格式 化 好 的 XML 给 Flash 文 件 , 它 就 迭代 处 理 这 个 XML, 添加 图 片 ， 
然后 以 动画 方式 展示 它们 。 每 一 张 图 片 都 支持 单 击 ， 能 把 你 带 往 一 个 新 页 面 (参见 图 5-14 )。 这 
是 我 非常 得 意 的 一 个 小 应 用 。 有 多 得 意 ? 我 把 它 发 布 到 了 个 人 博客 oneruttercom， 它 一 共 被 人 们 
下 载 了 13 000 多 次 。 这 个 Flash 文 件 大 小 约 5 KB， 一 共 使 用 了 136 行 代码 。 那 个 时 候 这 已 经 非常 短 
小 精 悍 了 ， 足 以 令 人 印象 深刻 。 直 到 开始 使 用 jQuery ， 我 才 明 白 那 些 代 码 还 是 太 多 了 。 
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Strider. 


Kd5-14 ”我 2006 年 的 作品 


一 个 用 Flash 8 写成 的 基于 XML 的 图 库 应 用 


CD 这 毫 不 奇怪 ，JavaScript 和 ActionScript 都 遵守 ECMAScript 规 范 ， 可 以 视 为 同一 家 族 的 两 个 兄弟 。 
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下 面 这 个 图 片 相 册 案 例 教 你 编写 一 个 图 片 相册 ， 它 与 我 2006 年 用 Flash 编 写 的 应 用 非常 相似， 
不 过 不 是 使 用 XML 驱动 ， 且 只 有 大 约 85 行 代码 。 如 果 你 需要 ， 可 以 扩展 这 个 程序 ， 添 加 XML 数 
据 源 支持 ( 我 把 这 个 任务 留 给 你 )。 图 5-15 展 示 的 是 这 个 图 片 相册 的 工作 方式 。 


tory Bookmarks Tools Window Help m o W) (1 0:52) Fri 10:22PM Q 


Mozilla Firefox (em) 


; 27 pe 
(<)> - ( Eo Ae) (aL jy http: //smashingjquery.com/code/chap06/example-animated.html# wy eG, Google Q) r 
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Watch Dogs. 
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E Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow jeeo 
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jQuery Images Galore. This element has no style rules. 
Y <div class-"container"> 
VY <div class-"slide-container" style="width: 1600px; left: -400px;"» 
P «div class="slide-imagel slides"> 
Y <div class="slide-image2 slides"> 
V <a href="http://www.onerutter.com"> 


«div class-"slide-text activeInfol" style-"EGpi UpXj ON 


"»Watch Dogs. </div> |ê 
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: <i 


图 $-15 ”图 片 相册 的 工作 方式 


(1) 页 面 上 需要 添加 的 唯 个 HTML 元 素 是 div.container， 所 有 其 他 HTML 都 由 脚本 生 
成 ， 填 充 到 这 个 容 需 中 。 

<div class="container"></div> 

(2) 接 下 来 准备 图 片 相册 的 样式 表 。 如 果 你 使 用 的 图 片 和 我 使 用 的 图 片 大 小 不 一 样 ， 就 修 
改 .container 的 属性 以 适应 你 的 尺寸 。 当 图 片 切换 时 ，.text-strip 类 用 来 设置 图 片上 方 的 文 
本 样式 。 


body {font-family:arial;} 


ul#nav { 
list-style-type:none; 
margin:10px 0 10px; 
padding:0;} 


ul#nav li { 
float:left; 
width: 30px; } 
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ul#nav li a {text-decoration:none; 
background: #05609A; 
color:#fff; 
padding: 5px; } 


ul#nav li a.active { 
background: #B4F114; } 


.container {position:relative; 
height: 250px; 
width: 400px; 
border:1px solid #333; 
overflow:hidden; } 


.Slide-container { 
position: absolute; 


top: 0; 
left: 0;} 
.Slides { 


float:right;} 


.Slide-text { 
display:none; 
font-size:18px; } 


img {border:0;} 


.textStrip {top:0px; 
display:block; 
position:absolute; 
left:-400px; 
padding: 5px; 
background: #333333; 
opacity: .9; 
color: #ffffff; 
width:100$; 

} 


(3) 首先 我 们 要 创建 3 个 数组 。 第 一 个 数组 sliqeArray， 用 来 存放 图 片 文 件 的 名 字 ， 这 些 图 


片 将 作为 图 片 相 册 中 的 一 张 张 幻 灯 片 显示 在 图 片 相册 中 。 第 二 个 数组 textArray,， 用 来 保存 每 张 
图 片 的 说 明 。 第 三 个 数组 urlArray， 用 来 保存 每 张 图 片 对 应 的 链接 CURL )。 你 需要 在 图 片 相册 
中 显示 几 张 图 片 ， 就 在 这 些 数组 中 准备 同样 多 的 元 素 。 


var slideArray = ["photol.jpg","photo2.jpg","photo3.jpg", "photo4.jpg"]; 

var textArray = ["Rusty Cable.","Watch Dogs.","Plant Sink.","Urban Cowboy"] ; 

var urlArray = ["http://www.google.com", "http://www.onerutter.com", "http:// 
www.flickr.com", "http://www. facebook.com"] ; 


(4) 4div.slide-containeriBIN#) Mi E ffjaiv.containergUz& Hh. Bi X. 它 用 来 存 


放 所 有 的 图 片 。 


$('.container').append('«div class="slide-container" />'); 
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(5) 在 slide-container 元 素 之 后 , 插入 一 个 无 序列 表 ul#nav。 这 个 无 序列 表 用 来 保存 导航 
链接 ， 控 制 显示 图 片 相册 中 的 哪 一 张 图 片 。 它 还 有 一 个 clearfix 必 性， 负责 设 定 导 航 列表 之 后 
的 CSS clear 属 性 ( 清除 浮动 )。 

$('.slide-container').after('«ul id-"nav" class="clearfix"></ul>'); 

(6) 编写 一 个 for 循 环 ， 循 环 次 数 为 sliaqearray 数 组 的 长 度 。slidearray 有 4 个 元 素 ， 因 此 
最 大 的 索引 值 是 3。 在 循环 体内 新 建 一 个 变量 slideNum， 并 将 它 的 值 设置 为 i + 1。 之 所 以 如 此 
设置 是 因为 i 的 第 一 个 值 是 0， 而 数组 中 第 一 张 图 的 文件 名 中 的 编号 是 1， 如 果 不 如 此 设置 ， 
slideNum 与 文件 名 就 无 法 匹配 。 


for(i=0; i < slideArray.length; i++){ 
var slideNum = i + 1; 


} 
(7) 循环 体 的 第 二 条 语句 用 来 往 ul#nav 元 素 中 追加 1i 元 素 及 相应 的 值 。 


for(i=0; i < slideArray.length; i++) { 
var slideNum= i + 1; 
$('#nav').append('<li><a href="#" rel="'+slideNum+'">'+slideNum+'</a></li>'); 


} 


(8) 接 下 来 ， 添 加 一 个 变量 sliqeInfo, 用 它 来 存放 显示 图 片 的 HTML。HTML 代 码 由 好 多 行 
组 成 ， 如 果 每 一 行 之 后 有 额外 的 空白 ，JavaScript 脚 本 就 不 能 工作 。 为 避免 此 问题 ,我 们 将 HTML 
分 成 多 个 子 字 符 串 并 用 += 运 算 符 连 接 起 来 。 这 样 代码 既 干净 又 易 读 。 

第 一 条 语句 创建 一 个 类 名 前 级 为 sligde-image 的 元 素 , 在 它 的 名 字 中 使 用 了 slideNum 变 量 ， 
因此 每 张 图 片 的 类 名 都 不 相同 。 第 二 条 语句 添加 一 个 类 名 为 slide-text 的 giv 元 素 , 它 的 内 容 为 
与 图 片 对 应 的 说 明 。 第 三 条 语句 添加 循环 变量 i 对 应 图 片 的 标签 ， 它 的 src 值 来 自 sligdeArray。 

for(i=0; i < slideArray.length; i++){ 

var slideNum = i + 1; 
$('#nav').append('<li><a href="#" rel="'+slideNum+'">'+slideNum+'</a></li>'); 
var slideInfo = '<div class="slide-image'+slideNum+' slides">'; 


slideInfo += '<div class="slide-text">'+textArray[i]+'</div>'; 
slideInfo += '<img src="images/'+slideArray[i]+'"/></div>'; 


} 
(9) HTML 拼接 完成 之 后 ， 把 它 追 加 到 .slide-containez 元 素 中 。 


for(i=0; i < slideArray.length; i++){ 


var slideText = i + 1; 
$('tnav').append('«li»«a href="#" rel="'+slideText+'!">'+slideText+'!</a></li>'); 
var slideInfo = '«div class="slide-image'+slideText+' slides">'; 


slideInfo += '<div class-"slide-text activeInfo'+[i]+'">'+textArray[i]+'</div>'; 
slideInfo += '«img src="images/photo'+slideText+'.jpg"/></div>'; 
$('.slide-container').append(slideInfo); 


} 

(10) 接 下 来 再 添加 3 个 变量 。sligeTotal 保 存 图 片 的 总 数 ， 也 就 是 sliqeArray 的 长 度 4。 
slidewidth 是 每 张 图 片 的 宽度 ， 而 slidecontainer 则 是 宽度 乘 以 slideTotal。 在 本 例 是 中 
slideContainer 的 值 是 1600。 
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var slideTotal = slideArray.length; 
var slideWidth = 400; 
var slideContainer = slideWidth * slideTotal; 


(11) 利用 CSS 方 法 ， 使 用 上 一 步 中 创建 的 变量 slidqecontainer 的 值 重新 设 定 .slidqe- 
container 元 素 的 宽度 。 


$(".slide-container").css({'width' : slideContainer}); 


(12) 为 导航 #mnav 无 序列 表 的 子 元 素 11 的 后 代 元 素 a 绑 定 click 事 件 处 理 函 数 。 


$('#nav li a').bind('click', function(){ 


2); 

(13) 当 链 接 被 单 击 时 高 亮 显示 相关 项 ， 这 样 就 能 明确 标识 用 户 刚刚 单 击 的 是 哪 一 张 图 片 。 要 
人 允许 当前 项 高 亮 显示 ， 我 们 需要 增加 两 条 语句 。 第 一 条 删除 所 有 元 素 的 active 类 。 第 二 条 语句 
使 用 this 关 键 字 为 刚刚 单 击 的 元 素 添加 active 类 。 


$('#nav li a').bind('click', function()( 

$('#nav li a').removeClass('active'); 
$(this).addClass('active'); 

1); 


(14) 如 果 此 时 .slidae-text 动 画 尚未 结束 ，c1lick 事 件 处 理 函 数 中 接 下 来 的 这 条 语句 会 使 
用 .css() 方 法 重 设 .sliqde-text 元 素 的 位 置 。 


$('#nav li a').bind('click', function() { 
$('tnav li a').removeClass('active'); 
$(this).addClass('active'); 
SI" eds text").css(( 

'top':'-100px', 

igita opes 
1); 


(15) 上 一 条 语句 重新 设 定 .sliqde-text 元 素 的 位 置 。 接 下 来 的 两 条 语句 使 用 .stop() 方 法 
和 .clearQueue() 方 法 停止 动画 并 清理 动画 序列 。 如 果 不 清理 动画 序列 ，. stop() 方 法 虽然 停止 
了 动画 ， 但 动画 未 完成 的 部 分 会 进入 动画 序列 ， 造 成 不 想 要 的 结果 。 


'dnav li a').bind('click', function() { 
'#nav li a').removeClass('active'); 
this).addClass('active'); 
".slide-text").css({ 

'top':'-100px', 

'"vight':'Üüpx' 

NH 

$(".slide-text").stop(); 
$(".slide-text").clearQueue(); 


de 创建 更 多 的 变量 。 第 一 个 是 active， 它 的 值 来 自 导 航 当 前 活跃 元 素 的 rel 属 性 值 减 1。 
第 二 个 变量 slideNum, 保存 导航 当前 活跃 元 素 的 rel 属 性 的 值 ( 不 减 1 )。 第 三 个 变量 slidePos， 
其 值 等 于 active 乘 以 slidewidth。 
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$('#nav li a').bind('click', function() { 
$('#nav li a').removeClass('active'); 
$(this).addClass('active'); 
$(".slide-text").css(( 
'top':'-100px', 
wight':'Üpx' 


$(".slide-text").clearQueue(); 
$(".slide-text").stop(); 


var active = $('#nav li a.active').attr("rel") - 1; 
var slidePos - active * slideWidth; 
var slideNum S('#nav li a.active').attr("rel"); 


(17) 在 上 一 步 中 新 建 的 变量 中 ， 如 果 active 的 值 等 于 2， 而 slidqewidath 的 值 等 于 400， 则 
slidePos 的 值 等 于 800。 在 这 个 例子 里 ， 对 于 选中 .slide-container 元 素 并 应 用 .animate () 
方法 让 图 片 向 左 移 这 件 事情 ，sligdePos 变 量 至 关 重要 。 我 们 在 调用 .animate() 方 法 时 还 提供 参 
Mduration ( 值 1000 ) 以 及 一 个 回调 函数 。 


$('#nav li a').bind('click', function() { 
$('#nav li a').removeClass('active'); 
$(this).addClass('active'); 
$(".slide-text").css(( 

'top':'-100px', 
'right':'Üpx' 


$(".slide-text").clearQueue(); 
$(".slide-text").stop(); 


var active = $('#nav li a.active').attr("rel") - 1; 
var slidePos - active * slideWidth; 
var slideNum = $('#nav li a.active').attr("rel"); 


$(".slide-container").animate(( 
left: -slidePos, 
),1000, function()( 

Jy 

yy 


(18) 我 们 在 第 一 条 animate 语 句 的 回调 callback 函 数 中 设置 .slidqe-text 的 动画 效果 。 使 
用 唯一 的 .sliaqe-text 类 选中 .slidqe-text 元 素 ， 然 后 使 用 .css () 方 法 设 定 必 要 的 样式 ， 以 
便 .sliqe-text 可 以 显示 在 当前 图 片 之 上 。 


$('#nav li a').bind('click', function() { 
$('#nav li a').removeClass('active'); 
$(this).addClass('active'); 
$(".slide-text").css(( 
'top':'-100px', 
'"yight':'Üüpx' 


1): 
$(".slide-text").stop(); 
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$(".slide-text").clearQueue(); 

var active = $('#nav li a.active').attr("rel") - 1; 
var slidePos - active * slideWidth; 

var slideNum = $('#nav li a.active').attr("rel"); 
$(".slides-container") .animate({ 


) 


left: -slidePos 
1000, function() { 
§('.slide-image'+ slide Num+' .slide-text').addClass('textStrip'); 


3); 


1); 


(19) ZEROS ES AKA, RIA .animate() 方 法 调用 ， 在 一 秒 钟 内 将 .slide-text 
移动 到 当前 图 片 之 上 , 然后 过 一 会 儿 再 让 .slite-text 从 图 片上 滑动 消失 。 图 5-16 显 示 了 该 脚本 
在 浏览 器 中 的 最 终 效果 。 

$('#nav li a').bind('click', function() { 


$('#nav li a').removeClass('active'); 
$(this).addClass('active'); 


$c. 


slide-text") .css({ 


'top':'-100px', 
'right':'0px' 


HG 


$(" 


.Slide-text").stop(); 
.Slide-text").clearQueue(); 


active = $('#nav li a.active').attr("rel") - 1; 
slidePos = active * slideWidth; 
slideNum $('#nav li a.active').attr("rel"); 


I 


.slide-container") .animate({ 


left: -slidePos 
},1000, function() { 
$('.slide-image'-«slideNum-' .slide-text').addClass('textStrip').animate({ 


}, 


1); 


1); 


top:0, 

left:slidePos, 

right:0 

1000, function() { 
$('.slide-text').delay(5000).animate(( 
top:-100 
), 1000); 

1); 


FRAME 


图 5-16 “该 脚本 在 浏览 器 中 的 最 终 效果 
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5.10.2 ”使 用 jQuery Easing 插 件 添加 缓 动 效果 


由 GSGD (http://gsgd.co.uk/sandbox/jquery/easing/ ) 提供 的 jQuery Easing 插 件 为 
jQuery 动画 增添 了 30 种 缓 动 特效 。.animate () 方 法 内 建 支持 两 种 缓 动 特效 swing 和 1iner， 
只 是 这 两 种 效果 非常 有 限 , 要 生成 类 似 颤 动 或 弹跳 等 更 台 真 的 动画 效果 ,最 好 还 是 使 用 插件 。 在 
动画 过 程 中 通过 加 速 /减速 控制 动画 的 缓 动 效 果 , 尤其 常见 于 一 个 动画 夏 然而 止 时 。 缓 动 特效 使 
动画 效果 更 逼真 。 

.animate(duration, easing, callback); 

jQuery 可 通过 插件 扩展 功能 (我 们 已 经 知道 , 可 以 编写 自己 的 jQuery 函数 )， 如 果 对 于 某 个 具 
体 任务 希望 能 够 重用 其 实现 代码 或 者 打算 把 它 发 布 到 jQuery 开源 社区 供 别 人 使 用 , 我 们 就 可 以 把 
它 改编 成 一 个 jQuery 插件 。 在 第 11 章 我 会 详细 介绍 jQuery 插件 。 

下 面 是 Easing 搬 件 支 持 的 一 些 缓 动 效果 : 


口 easeOutBounce 


口 easeInBounce 


口 easeInElastic 


口 easeInCubic 

easeOutBounce 和 easeInBounce 特 效 是 一 对 颤动 特效 组 合 ， 用 来 模拟 一 个 物体 在 屏幕 上 弹 
跳 。easeInElastic 特 效 让 一 个 元 素 像 松紧 带 那 样 啦 的 一 声 弹 回 就 位 。easeIncubic 类 似 传 统 
的 渐 快 特效 ， 不 过 要 慢 很 多 。Easing 搬 件 的 站 点 上 有 所 有 30 种 缓 动 特效 的 演示 效果 。 

下 载 这 个 缓 动 插件 ， 然 后 在 页 面 中 把 它 包含 在 jQuery 库 后 ， 就 可 以 使 用 了 。 出 于 演示 目的 ， 
我 要 为 上 面 的 案例 添加 一 个 缓 动 效果 。 

从 上 面 的 例子 中 抽出 以 下 代码 。 如 果 我 们 把 easing 参 数 设 置 为 easeoutBounce， 动画 就 会 
使 用 自 定义 缓 动 插件 提供 的 easeoutBounce 特 效 ， 就 这 么 简单 ! 

$(".slide-container").animate(í 

left: -slidePos 
},'easeOutBounce',1000, function() { 


$('.slide-image'+slideNum+' .slide-text').css({ 
'display':'block', 


'position':'absolute', 

'top':'Opx', 

'left':'-400px', 

'padding':'5px', 

'background':'4333333', 

'opacity':'.9', 

‘color': '#f£fffff', 

'width':'100$2' 
)).animate(( 

top:0, 

left:slidePos, 

right:0 
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}, 'easeOutBounce',1000, function() { 
$('.slide-text').delay(5000).animate(( 
top:-100 
), 1000); 
1); 


jQuery 应 用 


改进 导航 : KA, pn DOCTEUR 
生成 可 交互 的 生动 表格 
使 用 jQuery 制作 高 级 表单 


页 面 导航 帮助 你 穿梭 于 各 个 页 面 之 间 ， 寻找 产品 , 阅读 每 日 新 闻 或 者 登录 网 上 银行 查看 自己 
的 收 支 情况 。 在 网 上 使 用 导航 已 经 成 为 许多 用 户 的 第 二 本 能 。 利 用 前 几 音 学 到 的 jQuery 事件 和 特 
效 ， 能 有 效 地 增强 用 户 体验 。 

改进 导航 和 交互 方式 可 提高 客户 满意 度 , 从 而 提高 网 站 访问 量 。 我 将 在 本 章 介绍 一 些 难 用 导 
航 的 真实 案例 ， 并 教 你 使 用 jQuery、HTML 和 CSS 改 进 它们 。 


6.1 让 页 面 上 所 有 的 链接 都 在 新 窗口 打开 


能 一 次 选取 多 个 元 素 并 修改 这 些 元 素 是 jQuery 的 一 个 诱 人 功能 。 有 时 你 希望 页 面 上 所 有 的 链 
接 都 在 新 窗口 打开 , 但 没有 修改 页 面 源 代码 的 权限 。 页 面 通常 由 某 个 地 方 的 PHP、JSP( Java Server 
Pages ) 或 ASP ( Active Server Pages ) 文件 生成 ， 而 你 无 权 访问 它们 。 

不 过 ， 我 们 有 jQuery。 无 需 打 开 一 大 堆 文 件 逐 个 修改 比 对 ， 只 需要 一 丁点 儿 jQuery 代 码 就 可 
解决 这 个 问题 ， 这 既 可 靠 又 节省 时 间 。 使 用 jQuery 的 好 处 在 于 ， 当 我 们 不 再 需要 这 个 功能 时 ， 只 
需 注 释 掉 这 部 分 代码 或 者 干脆 删除 它 。 
现在 我 来 教 你 使 用 jQuery 设置 页 面 上 所 有 的 链接 属性 , 让 它们 改 在 新 窗口 中 打开 。 除 此 之 外 ， 
我 们 还 可 以 对 页 面 上 的 这 些 链接 做 些 别 的 事情 ， 比 如 : 

口 给 所 有 的 链接 添加 一 个 新 的 类 ; 

口 为 所 有 链接 添加 内 容 与 链接 文本 一 致 的 title 属 性 ; 
口 为 所 有 的 链接 分 别 添加 一 个 rel 属 性 ; 

a 删除 所 有 链接 的 href 属 性 ， 从 而 禁用 这 些 链接 。 

在 下 面 这 个 解决 方案 中 ,我 会 写 一 段 代 码 ,示范 如 何 遍 历 给 定 列表 中 的 所 有 链接 ,为 它们 添 
加 title 属 性 ， 并 让 它们 改 在 新 窗口 中 打开 〈 见 图 6-1 )。 
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Mozilla Firefox 


(4 > CED (X) GA) QC hup://smashingjauery.com/code/chap061/example-links.htmi Xv) Mi Googie Qa) ir 
@ Disable + Æ Cookies + C] CSS * =] Forms * [W] Images * @ Information * ^ / Miscellaneous * 27 Outline * 5 © Resize * gP Tools + {2) View Source * |.) Options 
] DD http://smashingj...ample-links.htm! + = 
* Yahoo 
* Google 
* Bing 
m 
P E Console HTML» CSS Script DOM Net Page Speed Page Speed Activity — YSlow eoo 
R8 i Edit © html Style» | Computed Layout DOM 
C e has no style rues. 
<head> 
V <body> 
Y <div class="container"> 
<div id="header"> 
V <ul ide"Links"> 
Y <li> 
<a href="http://www. yahoo.com" target="_blank"> Yahoo </a> 
<li> 
Y di» 
«a href="http://www.google.com" target="_blank"> Google «/a» 
«i: 
Y <li> 
<a href-"http://wm.bing.com" target-" blank"» Bing </a> 
</li> 
</ul> 
</div> 
</div> 
</body> 
</html> 
E Done 4* EBA 25.3K 0.4445 


图 6-1 Firefox 中 打开 的 Firebug 窗 口 ， 清 晰 地 显示 链接 的 target 属 性 已 变 为 _blank 


(1) 本 例 中 的 HTML 是 一 个 无 序列 表 u1#1inks。 我 们 将 利用 它 的 ID 选 取 列 表 中 的 链接 。 


<ul id="links"> 
<li><a href="http://www.yahoo.com">Yahoo</a></li> 
<li><a href="http://www.google.com">Google</a></li> 
<li><a href-"http://www.bing.com"»Bing«/a»«/li» 
</ul> 


(2) 选取 #1inks 1i 元 素 的 后 代 元 素 a， 然 后 使 
用 .attz () 方 法 把 这 些 链接 元 素 的 target 属 性 设置 
为 blank; 


-attz(UUUOO0OO0DODOO 
000000 


$('#links li a').attr('target', ' blank'); 
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任何 时 候 用 户 都 希望 能 在 导航 菜单 中 明确 地 看 到 自己 “ 身 处 何 处 ”。 然 而 这 种 基本 的 用 户 界 
面 需要 却 常常 被 忽视 。 图 6-2 展 示 的 就 是 这 样 一 个 例子 : 你 已 经 导航 到 了 一 个 特定 的 小 节 ， 但 主 
导航 上 的 菜单 项 却 仍然 〈 傻乎乎 地 ) 保持 高 亮 。 就 这 个 问题 来 说 ,我 见 过 一 些 jQuery 和 JavaScript 
解决 方案 ， 不 过 更 常见 的 解决 办 法 是 使 用 后 端 语言 ， 如 PHP、JSP 或 ASP。 

下 面 的 解决 方案 带 你 使 用 jQuery 设置 导航 菜单 ， 让 当前 选中 的 菜单 项 保持 高 亮 。jQuery 脚 本 
对 菜单 项 URL 与 页 面 实际 URL 进 行 比 对 ， 让 正确 的 菜单 项 高 亮 。 
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菜单 项 仍然 〈 错误 地 ) 保持 高 亮 


Dev & Design 
( i )- (eO CD Gf) http://mashable,com/dev-design/ Q) ier 
© Disable + d Cookies + LC CSS. E] Forms > [il images + @ Information « C) Miscellaneous * g/ Outine * $2 Resize * gh Tools > [x] View Source * J Options 
m Dev & Design * 


Top Topics ~ Advertise Network - Partners - AboutUs SubmitaTip! ContactUs 
‘© Spark of Genius Series 
sz  Mlashable / Dev & Design ° 
Join Ust ving [3 


HOME d SOCIAL MEDIA [BUSINESS $} ENTERTAINMENT ÇÈ TECH ig WEB VIDEO QYDEVADESIGN GP APPLE (mosie § BATTLES di oos 


sponsoneo ay VÉLEZ) WEB DESIGN WEB DEVELOPMENT 


ARATE ONS OTS 


UldownywhenfthelheatygoesIupl 


TASTE IT! > 


6 Job Search Tips for Aspiring Programmers 


DEV & DESIGN Its true that most 
programmers don't need any help getting a 

job. While other professions have cut down | > Tweet 
on hiring during the recession, the number 

of programming jobs has shot through the | 157 
roof. Demand is expected to increase by 

21% between 2008 and 2018. 
But not all programming jobs are created 

‘equal, and you want the most exciting, most 


interesting, or best-paying job, right? Well @ &a Ben & Jerry's on Facebook 
then you stil! have to try, even though vou L- a 


H Mashable.comi/f n] 42 il] 


图 6-2 ”即使 已 导航 到 一 个 特定 的 小 节 ， 主 菜单 上 的 菜单 项 仍 保持 高 亮 


(1) 创建 一 个 变量 pathn， 并 为 它 赋 值 为 location.pathname，pathname 是 JavaScript 原 生 对 
象 location 的 一 个 属性 ， 它 返回 URL 中 域名 之 后 的 部 分 。 

var path = location.pathname; 

假设 我 们 正在 访问 页 面 

www.smashingjquery.com/mycode/myexample.html。 那 么 location.pathname 就 等 于 /my- 


code/myexample.html,; 


(2) 再 创建 一 个 变量 patharray， 然 后 使 用 原生 的 Java Script 字符 串 方 法 .split() 把 
pathname 从 /处 拆 分 ， 得 到 一 个 数组 。 


var pathArray = path.split('/'); 


本 例 中 pathaArray 的 值 是 ['mycode'，'myexample.html']。 也 就 是 /mycode/myexample. 
html 的 拆 分 结果 。 

(3) 创建 最 后 一 个 变量 parrLength， 把 它 的 值 设 置 为 patharray 的 长 度 。 

var pArrLength = pathArray.length; 

(4) 创建 一 个 for 循 环 , 迭代 处 理 数组 patharray 的 每 一 个 值 。 然后 使 用 属性 选择 器 选中 包含 
其 中 某 个 值 的 所 有 链接 ， 为 其 加 上 selecteq 类 。 这 里 的 属性 选择 器 使 用 了 通配符 (* )， 它 会 匹 
配 href 的 任意 部 分 。” 


CD 这 里 的 匹配 很 粗放 ， 生 产 环境 下 建议 严格 匹配 整个 URL。 
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for(i 


-0; i < pArrLength; i++) { 
$("al 


href*='"+pathArray[i]+"']").addClass("selected") ; 
} 


NER NARRA — ERTE, E Roa AT BCA PSEA SL. WRA POOR, 
我 们 不 仅 要 高 亮 当 前 菜单 项 , 还 要 高 亮 它 的 父 菜单 项 , 因此 需要 修改 这 个 脚本 , 以 适应 下 拉 菜 单 。 
举例 来 说 ， 如 果 顶 级 菜单 项 是 “关于 我 们 ”， 它 的 下 拉 项 子 菜单 有 “我 们 的 故事 "、“ 工 作 机 会 ” 
和 “联系 我 们 ”， 我 们 必须 构建 可 能 的 URL 集 合并 使 用 .parent () I. children () 等 选择 器 匹配 


六 个 集合 
Ho 


这 
6.3 ”创建 简单 的 下 拉 菜 


下 拉 菜 单 是 页 面 导航 最 流行 的 方案 之 一 。 许 多 站 点 都 把 功能 分 成 几 组 ， 每 组 设置 一 些 页 面 。 
要 建立 一 个 极其 详细 的 、 一 次 展示 网 站 所 有 页 面 的 导航 系统 ,不 但 在 技术 上 是 个 挑战 ,甚至 有 可 
能 把 用 户 吓 跑 。 

下 拉 菜 单 的 好 处 在 于 我 们 能 够 在 菜单 中 列 出 所 有 页 面 , 但 默认 只 显示 最 顶级 的 菜单 。 然 后 由 
用 户 自 己 来 决定 〈 把 鼠标 悬 停 在 项 级 菜单 上 ) 是 否 需要 查看 更 多 的 项 。 

下 拉 菜 单 可 以 水 平 摆 放 ， 也 可 以 垂直 摆 放 在 主 菜单 之 下 ( 参见 图 6-3 )。 


" @ Firefox File Edit View History Bookmarks Tools Window Help am ES BN © $ ® 4) Œ 0:14) Mon9:46PM Q 
eoe JavaScript - CodeCanyon O 


(aj Ce *) http:/ /codecanyon.net/category/javascript Orv) GE Gooi alen 


Q natie m [jesse ss (3 images ~ Q) Information + Miscellaneous * . Outline * „ | Resize ~ Tools + || View Source * > Options 


a 
SIGNIN SIGNUP envato | 
I 


Start Searching ... a 


Categories M fi Getting Started - Files - Make Money - Forums Blog Help - 


All Files 


- PGE(123 4 5 6 > 1-300F 177 ITEMS [ usrvew 
JavaScrigt 


PHP Scripts 


Wf sic Accordion —— $6 Search Category c 
5 Sales 
Plugins 
Magento All Files 
Extensions JavaScript 
We P e eed s in JavaScript \ Images and Media $4 Calendars 
ExpressionEngine 15 Sales Countdowns 
Css Database Abstractions 
HTML5 
" - Images and Media 
Mobile bleColumns - jQuery $4 
i 
iz in JavaScript | Miscellaneous ps 


iPhone 5 Sales 
Media 


由 envato. 可 复制 


图 6-3 下拉 菜单 示例 


120 第 6 章 改进 导航 : HŽ, HARMS 


图 6-4 所 示 是 一 个 简单 的 下 拉 菜 单 。 我 要 教 你 编写 这 个 菜单 ， 完 成 之 后 再 给 它 加 上 一 
( 参见 图 6-5 )。 


eoo Mozilla Firefox e 
Q r )- ES) (3) GA) GD nip; /smashingjauery.com/code/chap06/example-dropdown.html TY) e coge Q) de 
@ Disable + /S Cookies + LJ CSS + E] Forms + $ images * @ Information * Miscellaneous * 27 Outline + 22 Resize * gP Tools + {2) View Source * .j? Options 
L [O http:/ /smashing...e-dropdown.html. ES 


Our Work Services About Us Contact 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta velit non tortor consequat ut egestas ligula rutrum. Nullam dolor turpis, 
elementum non ultrices et, dictum consequat augue. Cras in tellus ut erat commodo gravida id quis dui. Aenean ac tortor est. Suspendisse potenti. 
Nunc elit velit, faucibus ac pretium vitae, hendrerit ut eros. Nulla sollicitudin, tellus at vulputate accumsan, mauris purus interdum risus, sed ultricies 
diam purus ac dui. Sed quis ipsum augue, in mattis enim. Vivamus magna lacus, vehicula in porttitor non, iaculis quis nisl. enim nulla. 
Quisque sagittis, nisi eu pulvinar sollicitudin, lectus sem molestie augue, id varius nulla orci quis risus. Aenean convallis orci hn dolor malesuada 
luctus. Nulla ac justo hendrerit nulla sagittis feugiat. Maecenas dui tortor, pellentesque a porttitor a, blandit a libero. Quisque egestas mi 
condimentum felis fermentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam 
posuere blandit felis, vitae ornare nulla viverra vitae. Nunc dapibus faucibus massa ac fermentum. Ut quis dui sapien, nec convallis neque. Cras quis 
sollicitudin tellus. 


Pellentesque tristique ullamcorper orci, at suscipit neque imperdiet sit amet. Donec congue feugiat nisl, ac malesuada massa interdum sed. Donec 
eget mi sit amet ante venenatis consectetur. Pellentesque libero sapien, blandit ut pharetra non, congue nec mi. Curabitur ut eros massa. Cras 
ornare tempor commodo. Sed ipsum nibh, ultricies et commodo id, dictum sit amet felis. Nullam accumsan arcu eu sem ultrices sed suscipit lorem 
cursus, In semper turpis a neque egestas tempus. Nam lobortis bibendum justo, sit amet luctus nisi vestibulum et. Donec ac tellus turpis. Nunc non 
nunc quis turpis rutrum eleifend. Suspendisse augue metus, euismod id luctus non, condimentum eu nibh. Nulla non tortor sapien. Quisque at nisi 


sapien. 


图 6-4 设计 在 浏览 器 中 的 效果 


smashingjquery.com/code/chap06/example-dropdown-html 
o i = 


Our Work Services About Us Contact 


Lorem ipsum dolor sit amet, iam porta velit non tortor consequat ut egestas ligula rutrum. Nullam dolor turpis, 
elementum non ultrices et, di can ble in tellus ut erat commodo gravida id quis dui. Aenean ac tortor est. Suspendisse potenti. 
Sm |. Nulla sollicitudin, tellus at vulputate accumsan, mauris purus interdum risus, sed ultricies 

Vivamus magna lacus, vehicula in porttitor non, iaculis quis nisl. Ut sed enim nulla. 

olestie augue, id varius nulla orci quis risus. Aenean convallis orci non dolor malesuada 
luctus. Nulla ac justo hendre! tt . Maecenas dui tortor, pellentesque a porttitor a, blandit a libero. Quisque egestas mi 
condimentum felis fermentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam 
posuere blandit felis, vitae ornare nulla viverra vitae. Nunc dapibus faucibus massa ac fermentum. Ut quis dui sapien, nec convallis neque. Cras quis 
sollicitudin tellus. 


Pellentesque tristique ullamcorper orci, at suscipit neque imperdiet sit amet. Donec congue feugiat nisl, ac malesuada massa interdum sed. Donec 
eget mi sit amet ante venenatis consectetur. Pellentesque libero sapien, blandit ut pharetra non, congue nec mi. Curabitur ut eros massa. Cras 
ornare tempor commodo. Sed ipsum nibh, ultricies et commodo id, dictum sit amet felis. Nullam accumsan arcu eu sem ultrices sed suscipit lorem 
cursus. In semper turpis a neque egestas tempus. Nam lobortis bibendum justo, sit amet luctus nisi vestibulum et. Donec ac tellus turpis. Nunc non 
nunc quis turpis rutrum eleifend. Suspendisse augue metus, euismod id luctus non, condimentum eu nibh. Nulla non tortor sapien. Quisque at nisi 


sapien. 


有 图 6-5 ) 
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图 6-5 ”演示 mouseente 


一 点 装饰 
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(1) 下 拉 菜 单 由 内 套 的 无 序列 表 构 成 ， 这 样 的 设计 非常 灵活 ， 可 以 随意 添加 菜单 层次 和 菜单 
项 ， 而 无 需 担 心 会 破坏 设计 。 下 面 的 代码 中 ,我 创建 了 5 个 顶级 菜单 链接 和 2 个 下 拉 菜 单 (分 别 位 
Our Work 和 Services 之 下 )。 你 自己 的 菜单 项 可 多 可 少 ， 视 具体 需要 而 定 。 在 需要 菜单 的 地 方 加 
这 些 菜单 项 ， 小 心 别 忘 记 关闭 列表 的 标签 。 


«div id="header"> 
<ul id="navigation"> 


<li><a href="#">Home</a></1li> 
<li><a href="#">Our Work</a> 
<ul class-"subnav"» 
<li><a href="#">Example 1«/a»«/li» 
<li><a href="#">Example 2«/a»«/li» 
<li><a href="#">Example 3«/a»«/li» 
</ul> 
</li> 


<li><a href="#">Services</a> 
<ul class-"subnav"» 
<li><a href="#">Service 1«/a»«/li» 
<li><a href="#">Service 2«/a»«/li» 
<li><a href="#">Service 3«/a»«/li» 
</ul> 
</li> 
<li><a href="#">About Us</a></1li> 
<li><a href="#">Contact</a></1li> 
</ul> 
</div> 


(2) 接 下 来 准备 样式 表 ， 这 样 才能 保证 菜单 在 页 面 中 显示 正常 。 我 总 是 在 样式 表 的 开头 放 上 
清理 样式 (CSS reset )， 且 最 近 一 直 在 用 YUI ( Yahoo! User Interface ) 清理 样式 , 它 真是 好 用 极 了 。 

CSS 清 理 样 式 表 负责 把 有 关 样 式 的 值 重 置 为 0%， 既 让 所 有 的 浏览 咒 在 演 染 页 面 时 公平 竞争 ， 
也 让 页 面 更 容易 兼容 多 个 浏览 器 。 在 清理 样式 之 后 , 你 必须 为 这 些 样式 设置 新 的 值 ( 以 0 为 基准 )。 
由 于 本 例 使 用 了 清理 样式 , 有关 浏 览 器 默认 设置 已 经 重 置 , 无 需 为 兼容 各 个 浏览 器 增加 许多 额外 
的 CSS 样 式 ， 从 而 节省 了 大 量 的 时 间 。 

我 把 清理 样式 也 放 到 了 这 里 ， 如 果 你 需要 ， 尽 管 拿 去 用 。 


body, div, dl, dt, dd, ul, ol, li, hl, h2, h3, h4, h5, h6, pre, form, fieldset, input, 
textarea, p, blockquote, th, td{margin:0; padding: 0} 
hi, h2, h3, h4, h5, h6{font-size:100%; font-weight :normal } 


(3) 剩 下 的 CSS 控 制 页 面 上 主 菜 单 和 下 拉 菜 单 的 布局 。 在 开始 jQuery 编程 等 基础 工作 之 前 , 我 
们 先 完成 所 有 的 CSS， 把 下 拉 菜 单 的 表现 层 处 理 好 。 


.container { 
width: 950px; 
margin:10px auto; 
font:14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; 
border:1px solid #333; 


} 
p{margin:10px; } 


122 第 6 章 改进 导航 : 菜单 、 标 签 及 折 受 选项 


ul#navigation{ 
list-style-type:none; 
background: #CE0100; 
height: 63px; 
font-size:24px; 


ul#navigation li{ 
float:left; 
width:175px; 
text-align:center; 
position:relative; 
height: 63px; 
padding:20px 5px 10px 5px; 


ul#navigation li at 
color: #fff; 
text-decoration:none; 
display:block; 


ul#navigation li a.active{ 
border:1px solid blue; 


ul#navigation li ul.subnav{ 
background: #E7F1D2; 
width:175px; 
clear:both; 
display:none; 
position:absolute; 
top: 63px; 
-moz-border-radius-bottomleft: 8px; 
-moz-border-radius-bottomright: 8px; 
-webkit-border-bottom-left-radius: 8px; 
-webkit-border-bottom-right-radius: 8px; 
border-radius: 8px; 
border-left:2px solid #998; 
border-right:2px solid #998; 
border-bottom:2px solid #998; 


ul#navigation li ul.subnav lif 
clear:both; 
height: 40px; 
padding:0; 
text-align:center; 
margin: 0px; 


63 创建 简单 的 下 拉 菜 单 123 


ul#navigation li ul.subnav li at 
background:none; 
font-size:18px; 
color: #333; 
text-decoration:none; 
padding:10px 0; 
border:none; 


} 


ul#navigation li ul.subnav li a:hover{ 
background: #DBF1AD; 
font-size:18px; 
color: #333; 
border:none; 


} 

(4) 接 下 来 ， 我 们 使 用 选择 器 tnavigation 1i 选 中 菜单 项 ,设置 它 的 hover 事 件 。hover 事 
件 是 mouseenter 和 mouseleave 事 件 的 组 合 。 第 一 个 事件 处 理 函 数 处 理 mouseenter 事 件 ， 我 们 
需要 用 .finad() 找 出 类 名 为 subnav 的 能 套 列表 ， 然 后 调用 . slidepovwn () 方 法 把 它 显示 出 来 。 第 
二 个 事件 处 理 函 数 处 理 mouseleave 事 件 ， 它 做 的 事情 和 mouseentezr 事 件 处 理 晒 数 相 反 ， 即 
用 .finda() 找 出 相应 的 子 菜单 ， 然 后 调用 .sliaqeup() 方 法 把 它 收 起 来 。 对 那些 没有 子 菜 单 
( .subnav ) 的 元 素来 说 ， 当 鼠标 悬 停 在 它们 之 上 时 ， 由 于 找 不 到 .supnav 子 元 素 ， 什 么 都 不 会 
发 生 。 

.find() 方 法 帮助 我 们 从 结果 和 集中 过 滤 出 符合 选择 器 的 后 代 元 素 ， 得 到 并 返回 匹配 结果 集 。 

$ (document) .ready(function() { 

$('#navigation li').hover(function() { 
$(this).find('.subnav').slideDown('slow'); 

), function() { 
$(this).find('.subnav').slideUp('fast'); 


1); 
} 


你 或 许 会 想 ， 为 什么 不 像 下 面 这 样 ， 直 接 找 出 .subnav 元 素 并 让 它 显示 出 来 ? 

$('.subnav').slideDown('slow'); 

上 面 这 条 语句 没有 限定 条 件 ( this )， 它 会 匹配 所 有 的 .subnav 元 素 并 将 它们 显示 出 来 ， 这 
显然 是 错误 的 。 先 选中 #navigation 1i 元 素 ， 然 后 绑 定 hover 事 件 ， 我 们 就 可 以 用 this 关 键 字 
引用 被 hover 的 元 素 ， 从 而 确保 .slideDown () 方 法 只 应 用 到 被 悬 停 列表 项 的 子 菜 单 上 。 

(5) 最 后 一 步 ， 当 鼠标 位 于 主 菜 单 或 相应 的 子 菜单 上 时 ， 主 沫 单 和 相应 的 子 菜单 应 该 保持 高 
亮 。 图 6-$ 展 示 的 是 mouseenter 事 件 从 父 元 素 “ 反 冒 泡 ”到 子 元 素 的 一 个 例子 。 使 用 .find() 方 
法 找到 对 应 的 a 元 素 ， 如 果 是 mouseenter 事 件 就 添加 active 类 ， 否 则 就 删除 active 类 。 


$ (document) .ready (function()t{ 
$('ul#navigation li').hover(function() { 
$(this).find('.subnav').slideDown('slow'); 
$(this).find('a').addClass('active'); 
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l, function() { 
$(this).find('.subnav').slideUp('fast'); 
$(this).find('a').removeClass("active"); 

Ys; 

1); 


一 旦 我 们 有 了 一 个 能 正常 工作 的 下 拉 菜 单 ， 用 jQuery 给 菜单 添加 交互 就 非常 简单 了 。 你 可 以 
花 大 量 的 时 间 自 己 做 或 者 和 设计 师 一 起 做 美化 菜单 和 设计 的 工作 。 图 6-6 展 示 的 是 Firefox 浏 览 
输出 ， 其 中 Firebug 插 件 已 开启 ， 可 观察 到 DOM 中 下 拉 菜 单 代码 的 变化 。 


Bookmarks ools Windo 


Mozilla Firefox 


http://smashingjquery.com/code/chap06/example-dropdown.html 


Forms + # Images * (j Information + Miscellaneous 


Our Work Services About Us Contact 


Example 1 
Lorem ipsum dolor sit amet, iam porta velit non tortor consequat ut egestas ligula rutrum. Nullam dolor turpis, 
elementum non ultrices et, di =ya W jle 2 in tellus ut erat commodo gravida id quis dui. Aenean ac tortor est. Suspendisse potenti. 
Nunc elit velit, faucibus ac p E li Nulla sollicitudin, tellus at vulputate accumsan, mauris purus interdum risus, sed ultricies. 
diam purus ac dui. Sed quis Vivamus magna lacus, vehicula in porttitor non, iaculis quis nisl. Ut sed enim nulla. 
Quisque sagittis, nisi eu pulvi ple 3 olestie augue, id varius nulla orci quis risus. Aenean convallis orci non dolor malesuada 
luctus. Nulla ac justo hendrerit nulla tis at. Maecenas dui tortor, pellentesque a porttitor a, blandit a libero. Quisque egestas mi 
condimentum felis fermentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam 
posuere blandit felis, vitae ornare nulla viverra vitae. Nunc dapibus faucibus massa ac fermentum. Ut quis dui sapien, nec convallis neque. Cras quis 
sollicitudin tellus. 


P "D Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity — YSlow ( )jeeo 


&$ : Edit body < html Style» Computed Layout DOM 


b 
om 5 clement has no style rules. 
<head> 


Y <body> 
Y <div class-"container"» 
V <div id-"header"» 
Y <ul id-"navigation"» 
odi 
Y di 
«a href="#">Our Work </a> 
V <ul class="subnav" style-"opacity: 1; display: block;"> 
> i> 


> cli 
</ul> 
</li> 
> <li> 一 
> <li> 全 
b di> Y 


图 6-6 ”Firefox 浏 览 器 中 Firebug 搬 件 已 开启 ， 可 观察 到 DOM 中 下 拉 菜 单 代 码 的 变化 
( 男 见 彩 插图 6-6 ) 


使 用 .animate() 方 法 为 下 拉 菜 单 增加 特效 


在 本 节 中 ， 我 将 教 你 在 菜单 下 拉 时 添加 透明 度 变化 。 我 们 将 使 用 .animate () 方 法 为 上 一 节 
中 创建 的 下 拉 荣 单 添 加 高 级 动画 效果 。 我 们 延 用 上 一 个 例子 的 全 部 代码 ， 只 需要 修改 两 行 jQuery 
{iS animate () 方 法 让 我 们 能 够 控制 菜单 下 拉 过 程 中 的 更 多 细节 。 我 们 需要 给 它 4 个 参数 : CSS 
属性 、 动 画 持续 时 间 、 缓 动 方式 及 回调 函数 。 在 这 个 具体 例子 中 ， 我 希望 切换 height 属 性 并 改 
变 透 明度 ， 把 动画 持续 时 间 设 置 为 500 ms。 你 也 可 以 将 fast (相当 于 200 ms ) 或 者 slow 参 数 ( 相 
当 于 600 ms) 用 作 参 数 。 结 果 如 图 6-7 所 示 。 
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Mozilla Firefox 


http://smashingjquery.com/code/chap06/example-dropdown.html Ween Google 


LÀ us 7 _/ Ou tesiz a 


Ou¥ Work Services About Us Contact 


Lorem ipsum dolor sit amet, iam porta velit non tortor consequat ut egestas ligula rutrum. Nullam dolor turpis, 
elementum non ultrices et, di in tellus ut erat commodo gravida id quis dui. Aenean ac tortor est. Suspendisse potenti. 
Nunc elit velit, faucibus ac pi Nulla sollicitudin, tellus at vulputate accumsan, mauris purus interdum risus, sed ultricies 
diam purus ac dui. Sed quis Vivamus magna lacus, vehicula in porttitor non, iaculis quis nisl. Ut sed enim nulla. 
Quisque sagittis, nisi eu pulvi olestie augue, id varius nulla orci quis risus. Aenean convallis orci non dolor malesuada 
luctus. Nulla ac justo hendrerit nulla sagittis feugiat. Maecenas dui tortor, pellentesque a porttitor a, blandit a libero. Quisque egestas mi 
condimentum felis fermentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam 
posuere blandit felis, vitae ornare nulla viverra vitae. Nunc dapibus faucibus massa ac fermentum. Ut quis dui sapien, nec convallis neque. Cras quis 
sollicitudin tellus. 


x 


+ E Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow | oeo 
kb i Edit © html Stylev | Computed Layout DOM 
Y 
or | 村 和 
<head> 
V <body> 


V <div class-"container"» 
Y <div id-"header"» 
Y <ul id="navigation"> 
b <li> 
Y ài 
«a href="#">0ur Work </a> 
> <ul class="subnav" style-"opacity: 0.0588544; display: block? 
overflow: hidden; height: 5.60097px;"> 
<i> 
> di 
> ai> 
> <li> 
</ul> s 
</div> 4 


<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta velit non |" 


图 6-7 Firefox FEART FARR ES SURE 


我 们 在 两 条 语句 中 使 用 .animate() 方 法 切换 滑动 (下拉 / 卷 起 ) 特效 ， 在 hover 事 件 发 生 


时 把 cpacity 和 height 这 两 个 CSS 属 性 参数 传递 给 .animate() 方 法 。 


$ (document) .ready(function() { 
$('ul#navigation li').hover(function() { 
$(this).find('.subnav').animate({opacity: 1.0,height: 'toggle'), 500); 
$(this).closest('a').addClass('active'); 
), function() ( 
$(this).find('.subnav').animate((opacity: 0,height: 'toggle'}, 500); 
$(this).find('a').removeClass("active"); 
1): 
1); 


6.4 MEMAR 


折 县 菜单 是 很 流行 的 设计 。 当 需要 在 一 小 块 地 方 显 示 一 大 堆 内 容 时 ，Web 设 计 师 和 UI 设 计 师 
常常 会 选用 折 友 菜单。 折 县 菜单 只 显示 一 节 的 内 容 ,同时 隐藏 其 他 内 容 。 当 鼠标 悬 停 在 菜 项 上 或 
者 单 击 一 个 具体 的 项 时 ， 相 关联 的 内 容 就 展开 或 缩 起 来 。 折 受 菜 单 可 用 于 导航 ,不 过 最 近 它 们 广 
泛 用 于 在 一 小 块 地 方 显示 大 量 的 内 容 等 与 显示 内 容 相关 的 场合 。Magento〈 开源 商务 平台 ) 就 实 


现 了 一 个 折 又 选项 风格 的 结账 程序 ， 如 图 6-8 所 示 。 
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单 击 此 处 显示 隐藏 的 内 容 


o0 Checkout 
(RE (CQ) | ) (会 ) Gg http://pro-demo.magentocommerce.com/checkout/onepage/ wr) Gi ogle Qa) > 
@J Disable * Æ Cookies * L] CSS * E] Forms * $ Images * @ Information * Miscellaneous * ./ Outline » | Š Resize * jP Tools * f>] View Source * “> Options 
la Checkout + = 
— E Checkout Method Shipping Address 
Shipping Method 
B Billing Information Payment Method 
First Name * Last Name * 
Company Email Address * 
Address * 
City * State/Province * 
Please select region, state or province z 
Zip/Postal Code * Country * 
United States z 
Telephone * Fax 


O Ship to this address 
© Ship to different address 


* Required Fields 


CONTINUE 


图 6-8 ”Magento 站 点 使 用 了 折 又 选项 风格 的 结账 程序 


在 这 一 节 的 案例 中 , 我 们 一 起 实现 一 个 用 于 网 站 侧 栏 导 航 的 垂直 折 秋 菜单 。 折 又 菜单 C 同一 
NZI) 只 有 一 个 小 节 是 展开 状态 ,其 余 各 节 都 呈 关 闭 状态 。 标 题 元 素 会 显示 一 个 图 标 ， 指示 当 前 
展开 的 是 哪个 小 节 。 

(1) 首先 定义 折 释 菜单 的 HTML 结 构 。 我 们 的 目标 是 创建 一 个 便于 jQuery 操作 和 维护 的 干净 利 
落 的 结构 。HTML 结 构 需要 两 个 元 素 ， 一 个 是 折 受 菜单 标题 元 素 ， 一 个 是 折 受 菜单 内 容 元 素 。 其 
中 标题 元 素 有 一 个 accordion-header 类 ,， 它 包 庄 着 一 个 用 来 显示 标题 文本 的 hb3 标 签 。 单 击 标题 
元 素 可 显示 或 隐藏 其 下 方 的 内 容 。 内 容 元 素 是 一 个 无 序列 表 ， 具 有 accorqion-content 类 。 单 
击 标题 时 ， 内 容 元 素 包 囊 着 的 内 容 就 会 视 情 况 隐藏 或 显示 。 

<div id="accordion"> 

«div class="accordion-header"> 
<h3>Books</h3> 


<span></span> 
</div> 


<ul class="accordion-content"> 
<li><a href='#'>Business</a></1li> 
<li><a href='#'>Education</a></1li> 
<li><a href='#'>Tech</a></1li> 
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<li><a href='#'>Romance</a></1i> 
</ul> 


«div class="accordion-header"> 
<h3>Electronics</h3> 
<span></span> 

</div> 


<ul class="accordion-content"> 
<li><a href='#'>Audio</a></1li> 
<li><a href='#'>Video</a></1li> 
<li><a href='#'>Automobile</a></1li> 
<li><a href='#'>Appliances</a></1li> 
</ul> 


<div class="accordion-header"> 
<h3>Sporting Goods</h3> 
<span></span> 

</div> 


<ul class="accordion-content"> 
<li><a href='#'>Baseball</a></1li> 
<li><a href='#'>Basketball</a></1li> 
<li><a href='#'>Football</a></1li> 
<li><a href='#'>Tennis</a></1li> 
</ul> 
</div> 


(2) PR, FT BBS I PIE WN. PUTTAR RR, 我 
们 先 加 入 CSS 清 理 样 式 : 


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, 
textarea, p, blockquote, th, td{margin:0; padding: 0} 
hi, h2, h3, h4, h5, h6{font-size:100%; font-weight :normal} 


(3) 余下 的 CSS 控 制 折 秋菜 单 的 外 观 。 我 们 给 菜单 和 内 容 元 素 以 不 同 的 样式 ， 菜 单项 包含 一 
个 图 标 ， 用 以 指示 当前 哪个 菜单 项 被 选中 。 

菜单 图 标 使 用 了 CSS“ 精 录 ”( sprite )。“ 精 灵 ” 是 指 创 建 一 张大 图 ， 然 后 通过 背景 定位 技术 
用 这 一 张 图 为 Web 站 点 上 的 多 个 元 素 提供 背景 。 使 用 “精灵 ”最 大 的 好 处 是 可 大 大 减少 站 点 向 
Web 服 务 嚣 请求 图 片 的 次 数 ， 从 而 降低 了 载 入 时间， 提高 了 站 点 性 能 。 如 果 你 的 站 点 中 使 用 了 20 
多 张 图 片 ， 就 能 明显 体会 到 使 用 “精灵 ”时 的 性 能 改善 。 此 外 ,“ 精 灵 ” 还 有 助 于 防止 图 片 载 人 
过 程 中 的 闪烁 ( 比如 使 用 两 张 独立 的 图 片 制作 翻转 效果 ,， JE ELSE ERIS P Hr p ARI TEST )。 


#accordion{ 
width: 225px; 
margin:10px 0 10px 10px; 
} 


#accordion .accordion-header( 
background: #3971AC; 
color:#fff; 
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border-bottom:1px solid #fff; 
position:relative; 


#accordion .accordion-header h3{ 
margin:0; 
cursor:pointer; 
text-indent:10px; 
padding:5px 0; 


#accordion .header-active{ 
background: #48ABC3; 


#accordion .accordion-header span{ 
background:url(../images/accordion_sprite.gif) no-repeat; 
display:block; 
position:absolute; 
width:11px; 
height :12px; 
top: 5px; 
left:200px; 


#accordion .accordion-header span.icon-active( 
background:url(../images/accordion sprite.gif) no-repeat; 
background-position:0 -12px; 
display:block; 
position:absolute; 
width:11px; 
height :12px; 
top: 5px; 
left:200px; 


#accordion ul.accordion-content{ 
margin:0px 0 Opx 0; 
padding:5px 5px 10px 5px; 
list-style-type:none; 
background: #A8D7E2 ; 


#accordion ul.accordion-content lif 
padding:1px 0px; 
display:block; 
margin:0; 
padding: 2px 5px; 


#accordion ul.accordion-content li a{ 
color: #D16C3A; 
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(4) 在 页 面 加 载 完成 之 后 ， 确 保 只 有 第 一 个 菜单 元 素 及 其 内 容 元 素 可 见 。 以 下 jQuery 代码 结 
合 使 用 .not () 方 法 和 : first 过 滤器 ， 使 第 一 个 元 素 之 外 的 其 他 折 和 受 内 容 〈 内 容 元 素 ) 隐藏 。 

$('.accordion-content').not(':first').hide(); 

not () 方 法 过 滤 掉 参数 选择 器 匹配 的 任意 元 素 或 者 选择 器 。 参 数 选择 器 可 以 是 某 种 过 滤器 
( 如 本 例 所 示 )， 也 可 以 是 一 个 具体 的 元 素 ( 在 下 面 这 一 步 我 们 就 会 看 到 这 种 例子 )。 

(5) 隐藏 完 除 第 一 个 外 的 所 有 .accordion-content 元 素 之 后 ， 我 们 用 男 一 条 语句 找 出 第 一 
个 .accordion-content 元 素 ， 并 调用 .show() 方 法 (确保 它 可 见 ): 

$('.accordion-content:first').show(); 

(6) 为 了 让 当前 菜单 项 高 亮 ， 我 在 CSS 文 件 中 定义 了 一 个 header_active 类 。 使 用 下 面 的 代 
码 把 这 个 类 应 用 到 第 一 个 .accordion-header 元 素 : 


$('.accordion-header:first').addClass('header-active'); 

我 还 使 用 空 的 span 标 签 为 折 和 县 菜单 的 标题 加 了 图 标 。 我 定义 了 一 个 icon-active 类 ， 它 会 
显示 成 一 个 向 下 的 箭头 ， 提 示 用 户 这 个 内 容 区 是 展开 状态 。 如 果 标 题 没 有 这 个 类 ， span 标 签 就 
会 显示 成 一 个 向 右 的 箭头 。 使 用 :first 过 滤器 选中 第 一 个 .accordion-header 元 素 ， 然 后 链 式 
调用 .fina() 方 法 找 出 它 的 span 后 代 元 素 ， 为 它 加 上 .icon-active 类 。 

$('.accordion-header:first').find('span').addClass('icon-active'); 

(7) BUE E AAA REY SEAT —— LED Se Iw; HP dA, ULIS . accordion-header fyi 
元 素 绑 定 click 事 件 处 理 函 数 。 


$('.accordion-header').click(function () { 


ks 

(8) click 事 件 处 理 函 数 中 的 第 一 条 语句 负责 让 当前 展开 的 元 素 缩 回 去 ,并 移 除 使 它们 高 亮 的 
类 ,为 此 ,只 需 选中 可 见 的 .accordion-content 元 素 , 并 调用 .sliaqeUp() 。 之 后 再 调用 .prev1() 
得 到 DOM 树 的 上 一 个 元 素 ， 也 就 是 对 应 的 .accordion-header 元 素 ， 删 掉 该 元 素 的 


header-active 类 。 


$('.accordion-header').click(function () { 
$('.accordion-content:visible').slideUp('slow').prev() 
.removeClass('header-active'); 


1); 

.prev1() 方 法 用 于 查找 DOM 树 中 上 一 个 兄弟 元 素 。.prev () 方 法 还 支持 选择 器 参数 ， 比 如 你 
可 以 将 .active 作 为 参数 传递 给 它 。 

(9) 增加 一 条 语句 ， 确 保 把 所 有 可 见 的 .icon-active 元 素 显 示 成 向 右 的 箭头 ， 方 法 是 移 除 


icon-active 类 。 


$('.accordion-header').click(function () { 
$('.accordion-content:visible').slideUp('slow').prev() 
.removeClass('header-active'); 
$('.icon-active:visible').removeClass('icon-active'); 


dy 
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请 务必 记 住 ，.addclass () 、removeClass () 和 hasClass () 方 法 的 参数 ， 类 的 名 字 前 不 需 
要 名 点。 这 是 一 个 常 被 忽视 的 问题 ， 会 导致 jQuery 脚本 错误 。 另 外 ，.is()、.filter() 方 法 
和 .not () 方 法 在 参数 为 类 名 时 ， 一 定 要 加 上 和 句 点。 

(10) 增加 一 条 语句 ， 使 用 this 关 键 字 选中 被 单 击 的 菜单 标题 ， 给 它 加 上 header-active 类 。 
然后 用 .next () 方 法 选中 它 的 下 一 个 元 素 ， 即 内 容 元 素 ,， 调 用 .sligdeDown () 让 其 慢 慢 滑 下 。 


$('.accordion-header').click(function () { 
$('.accordion-content:visible').slideUp('slow').prev() 
.removeClass('header-active'); 
$('.icon-active:visible').removeClass('icon-active'); 
$(this).addClass('header-active').next().slideDown('slow'); 


)); 

.next () 方 法 与 .prev() 方 法 正 相 反 ， 它 不 返回 上 一 个 兄弟 元 素 ， 而 是 返回 下 一 个 。 

(11) 最 后 一 条 语句 使 用 this 关 键 字 ， 结合 .fing() 方 法 找到 .accordion-header 元 素 中 的 
span 标 签 ， 给 它 加 上 icon-active 类 。 


$('.accordion-header').click(function () { 
$('.accordion-content:visible').slideUp('slow').prev() 
.removeClass('header-active'); 
$('.icon-active:visible').removeClass('icon-active'); 
$(this).addClass('header-active').next().slideDown('slow'); 
$(this).find('span').addClass('icon-active'); 


)); 
如 果 在 站 点 或 应 用 中 ， 折 登 菜 单项 不 是 页 面 固有 的 ， 而 是 被 动态 添加 到 DOM 中 的 ， 你 一 定 
要 改 用 .live() 方 法 绑 定 click 事 件 。 和 否则 那些 在 DOM 加 载 完 之 后 才 添加 进来 的 元 素 不 会 响应 
click 事 件 。 
将 所 有 的 HIML 、CSS 和 jQuery 代码 组 合 到 一 起 ， 并 在 浏览 器 中 载 和 人 这 个 页 面 ， 你 就 会 看 到 
一 个 生 龙 活 虎 的 折 半 菜单 ( 参见 图 6-9 )。 
折 县 菜 单 脚本 能 帮助 我 们 在 一 小 块 地 方 显示 大 量 的 内 容 ， 不 过 它 也 有 很 多 局 限 性 ， 如 下 。 
口 随 着 不 断 向 折 笃 菜单 中 添加 菜单 项 ， 我 们 开始 需要 滚动 页 面 才能 选择 或 查看 其 中 舱 人 的 
内 容 。 如 果 是 在 一 个 真实 项 目 中 使 用 折 针 菜单， 这 对 用 户 界面 来 说 是 相当 大 的 缺陷 ， 它 
会 降低 界面 的 可 用 性 ， 如 果 是 一 个 电子 商务 站 点 的 话 ， 其 至 会 降低 销售 额 和 转化 率 。 
口 刷新 页 面 时 , 折合 菜单 并 不 会 记 住 上 一 次 展开 的 是 哪个 菜单 项 , 不 过 我 们 可 以 通过 jQuery 
和 cookie 实 现 这 类 功能 。 解 决 这 个 问题 还 有 一 项 更 好 的 、 不 使 用 cookie 的 技术 ， 那 就 是 在 
URL 的 查询 字符 串 中 使 用 锚 ， 详 见 Rebecca Murphey 的 一 篇 博文 ( http;//blog.rebeccamur- 
phey.com/2007/12/04/anchor-based-url-navigation-with-jquery/ )。 
a 折 释 菜单 的 当前 位 置 无 法 保存 到 书签 中 。 如 果 你 通过 添加 书签 收藏 一 个 页 面 ， 期 望 下 次 
打开 它 时 能 打开 保存 时 看 到 的 小 节 ， 你 的 期 望 会 落空 。 这 个 问题 可 以 通过 上 一 段 中 提 到 
的 锚 技 术 解 决 。 
口 如 果 你 的 站 点 受众 缺乏 因特网 经 验 ， 他 们 有 可 能 不 熟悉 折 苹 业 单 ， 因 此 很 可 能 根本 就 不 


会 用 。 
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Mozilla Firefox 


(a ) D7 (CJ) (XJ t) (AE http: / /www.smashingjquery.com/code/chap06 /example-accordion.html w v) Ch Google Qa) fer 


@ Disable * Æ Cookies * |] CSS + =] Forms » [E Images + @ Information + ^. Miscellaneous * 27 Outline + 2; Resize + J” Tools + $>) View Source + J) Options 
| O) http//www.smas...-accordion-htmi [EP = 


Books d 

Audio 7 
Automobile 

Appliances 


Sporting Goods > 


+ E Console HTML» CSS Script DOM Net PageSpeed Page Speed Activity — YSlow ( )eeo 
RŠ : Edit ul.accordion-list div&accordion < div.container < body html Style» | Computed Layout DOM 
accordion.css (line 19) 


.container { 
Font: 14px "Helvetica 
au lelvetica, Geneva, sans-serif; 


x auto; 
width: fe 


uv div, p dt, dd, ul, ol, accordion.css (line 7) 
hi 6 


textarea, p, blockquote, th, 
"dis mh none td{ 
on- salar header-activ argin- 
ist" style=" "display: blocks" padding: 0; 
jeader"> } 
ion-list" style="display: none 


图 6-9 Firefox FHEARA, ÆFirebughiik EHAR T 26 25 
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标签 导航 不 但 容易 实现 ， 而 且 非 常 直观 ， 深 受 Web 设 计 师 和 开发 者 的 喜爱 ， 常 被 用 于 Web 站 
点 或 应 用 内 的 导航 。 标签 结 构 不 禁 使 人 回想 起 在 文件 柜 中 使 用 悬挂 标签 文件 夹 区 分 文件 内 容 的 年 
代 。 如 今 标 签 结 构 已 经 被 成 功 移植 到 Web 上 ， 成 为 一 种 把 数据 组 织 到 逻辑 “文件 柜 ” 或 网 页 的 极 
佳 方式 。 图 6-10 展 示 的 是 Basecamp 项 目 管理 工具 ， 它 的 工具 箱 (tools ) 部 分 采用 了 标签 来 组 织 
显示 内 容 。 

标签 式 导 航 不 仅 用 于 网 页 , 也 常见 于 计算 机 桌面 ,一些 浏 览 嚣 ， 比 如 Mozilla Firefox 和 Google 
Chrome， 使 用 标签 在 一 个 窗口 中 显示 多 个 Web 页 ， 最 近 IE7 也 采用 了 这 种 用 户 界面 。 苹 果 机 上 的 
聊天 程序 Adium 和 PC 上 的 Trillian 也 采用 了 标签 式 导 航 ， 用 于 在 一 个 窗口 中 组 织 多 个 聊天 会 话 。 

一 些 站 点 结合 动态 内 容 切换 技术 把 标签 式 导 航 推 向 了 另 一 个 高 度 。 这 时 标签 并 非 用 于 站 点 中 
不 同 页 面 之 间 的 导航 ,而 是 用 于 在 同一 页 面 动态 切换 显示 内 容 , 这 与 折 受 菜单 在 一 个 较 小 的 区 域 

本 
Ajax 技术 载 和 要 显示 的 内 容 ， 显 示 的 内 容 实际 上 来 自 服务 器 而 非 页 面 , 而 且 能 够 做 到 每 一 次 都 显 
示 不 同 的 内 容 ， 这 才 是 真正 的 动态 内 容 切 换 。 图 6-11 展 示 Lees i (www.panic.com/coda ), 
它 不 但 在 页 面 中 使 用 标签 展示 动态 内 容 , 而 且 在 呈现 内 容 时 使 用 了 动画 技术 , 当 用 户 单 击 标签 时 ， 
内 容 不 是 从 左边 滑 和 信 ， 就 是 从 右边 滑 入 ， 相 当 漂 亮 
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GAY Googie Qa) ir 


J Miscellaneous * 7 Outline * $% Resize + gP Tools * $2) View Source * {> Options 


> CC) (X) GA) Cos http: //rutterinteractive.basecamphg.com/project_templates wy) 
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Jake Rutter | My info | Sign out (HELP 


Dashboard € 


To-Dos Milestones DLE MEME Templates MERIT 
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Project templates save you time. 

Create lots of similar projects? A template will save you time. Add milestones, to-dos, and messages 
once and you can reuse them on future projects. When you create a new project based on a 
template, all the milestones, to-dos, and messages will be created for you automatically. 


Create your first project template 


with Basecamp 


图 6-10 Basecamp 项 目 管理 工具 ， 它 的 工具 箱 部 分 采用 了 标签 来 组 织 和 显示 内 容 
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Preview for reals. 
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图 6-11 “Coda 站 点 在 页 面 中 使 用 标签 显示 动态 内 容 


) 
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在 下 面 这 个 教程 中 ， 我 带领 大 家 使 用 标签 实现 一 个 动态 内 容 切 换 页 面 。 这 个 教程 中 的 jQuery 
脚本 非常 健壮 ， 文 持 随 时 添 删 内 容 和 标签 。 

(1) 定义 标签 的 HTML 结 构 。 标 签 需要 两 个 元 素 一 一 导航 元 素 和 内 容 元 素 。#tabs 无 序列 表 用 
作 标 签 ， 其 中 的 每 个 1i 元 素 内 有 一 个 链接 , 链接 文本 即 标签 的 显示 内 容 。 在 本 教程 中 ,我 使 用 了 
以 下 5 个 导航 标签 : 


<ul id="tabs" class="clearfix"> 


<li><a href="">Home</a></1i> 
<li><a href="">Shop</a></1i> 
<li><a href="">Community</a></1i> 
<li><a href="">Customer Service</a></1i> 
<li><a href="">About</a></li> 
</ul> 


(2) 添加 标签 内 容 。 每 一 个 标签 对 应 的 内 容 包 装 在 一 个 名 为 .content 的 元 素 中 。 你 可 以 添加 
更 多 或 更 少 的 内 容 标签 ， 只 要 数量 和 标签 的 个 数 一 致 就 行 。 .content-container 元 素 包 于 着 所 
有 的 标签 。 在 本 例 中 ，.content-container 包 含 以 下 5 部 分 内 容 : 


<div id="content-container"> 

<div class="content"> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id 
mauris placerat iaculis. Integer viverra velit eros, sed semper ante. Ut at turpis in 
tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. 
</div> 


<div class="content"> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id 
mauris placerat iaculis. Integer viverra velit eros, sed semper ante. Ut at turpis in 
tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. 
</div> 


<div class="content"> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id 
mauris placerat iaculis. Integer viverra velit eros, sed semper ante. Ut at turpis in 
tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. 
</div> 


<div class="content"> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id 
mauris placerat iaculis. Integer viverra velit eros, sed semper ante. Ut at turpis in 
tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. 
</div> 


<div class="content"> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id 
mauris placerat iaculis. Integer viverra velit eros, sed semper ante. Ut at turpis in 
tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. 
</div> 


<div class="content"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id 
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mauris placerat iaculis. Integer viverra velit eros, sed semper ante. Ut at turpis in 
tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. 
«/div» 
«/div» 


(3) 接 下 来 ， 我 们 添加 重 置 样式 以 确保 标签 在 各 浏览 器 中 显示 一 致 : 


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, 
textarea, p, blockquote, th, td{margin:0; padding:0} 

hi, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal } 

.clearfix:after{content:".";display:block;height:0; clear:both; visibility:hidden} 


(4) 剩 下 的 CSS 负 责 让 标签 和 内 容 各 就 各 位 。 记 住 一 个 关键 点 ， 所 有 的 . content 元 素 默 认 都 
是 隐藏 的 。 
body {background: #8CCAD9 } 


ul#tabs { 
list-style-type:none; 
position:relative; 


} 


ul#tabs li( 
float:left; 
width:155px; 
text-align:center; 
position:relative; 
margin:0 3px; 
position:relative; 


} 


ul#tabs li a.tab-active{ 
color:green; 
background:#fff; 
position:relative; 
top: 1px; 

} 


ul#tabs li a{ 
border-top:1px solid #9B4C24; 
border-left:1px solid #9B4C24; 
border-right:1px solid 49B4C24; 
background:12E7D91; ; 
padding:10px 5px 10px 0px; 
display:block; 
text-decoration:none; 
font:bold 14px "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; 
color:tdfff; 
position:relative; 


#content-container{ 
border:1px solid #333; 
background:#fff; 


.content {display:none; } 
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以 下 所 有 jQuery 代码 都 要 包 在 document .readqy() 事 件 处 理 函 数 内 ， 确 保 在 DOM 准 备 好 之 
后 ， 才 执行 我 们 的 jQuery 代码 。 

(5) 页 面 加 载 完 成 之 后 ， 我 们 需要 让 第 一 个 标签 的 内 容 显示 出 来 。 下 面 这 条 语句 使 用 :first 
过 滤器 选中 .content 元 素 ， 然 后 调用 . show() 方 法 将 它 显 示 出 来 。 


$('.content:first') .show() 

(6) 在 第 一 个 内 容 元 素 显 示 出 来 之 后 ， 我 们 还 要 选中 第 一 个 导航 标签 ( #tabs li a:first ), 
为 它 加 上 tab-active 类 ， 从 而 保证 页 面 加 载 完成 之 后 ， 第 一 个 标签 呈 选 中 状态 。 

$('#tabs li a:first').addClass('tab-active'); 


(7) 为 导航 元 素 ( #tabs 1i a ) 绑 定 hover 事 件 。hover 事 件 综合 了 mouseenter 和 mouseleave 
事件 ， 这 个 hovez 事 件 完全 是 可 选 的 ， 添 加 它 纯粹 是 为 了 加 特效 。 
$("#tabs li a").hover( 
function () { 
// mouseenter 事件 
js 
function () ( 
// mouseleave 事件 
} 
)3 
(8) 由 于 动画 效果 当 且 仅 当 鼠标 县 停 在 标签 之 上 时 才 显示 出 来 ,所 以 我 们 应 该 在 mouseenter 
事件 处 理 函 数 中 添加 一 条 调用 .animate () 方 法 的 语句 。 当 用 户 把 鼠标 放 到 标签 上 300 ms 之 后 ， 
标签 就 在 50 ms ( 持续 时 间 ) 之 内 向 左 移动 20 px， 然 后 弹 回 原 处 。 如 果 你 更 喜欢 其 他 效果 ， 可 以 
添加 其 他 CSS 属 性 来 调整 .animate () 。 


.animate() 方 法 只 支持 属性 值 为 数值 的 CSS 属 性 ， 如 margin、padding、1left、top 和 


opacityo 


$("ftabs li a") -hover ( 
function () { 
// mouseenter 事件 
$(this).animate({left:20}, 300, function ()( 
$(this).animate({left:0}, 50); 
1); 
js 
function () ( 
// mouseleave 事件 
} 
) . 


(9) 为 导航 元 素 (#tabs li a) 绑 定 click 事 件 处 理 函 数 。 这 个 click 事 件 处 理 函 数控 制 页 
面 中 内 容 元 素 的 显示 和 隐藏 。 我 们 先 添加 一 个 zxeturn false 语 句 阻 止 单 击 事件 的 默认 行为 ( 重 
定向 到 被 单 击 的 链接 # )。 


S('ul#tabs li a').bind('click',function () { 
return false; 


1); 
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(10) 然后 编写 click 事 件 处 理 函 数 真 正 的 第 一 条 语句 ， 获 取 被 单 击 标签 的 索引 号 〈 第 几 个 )， 
并 把 它 保存 到 变量 1inkIndex: 先 选 中 所 有 的 导航 标签 (#tabs li a)， 然后 调用 .index() 方 
法 ， 并 以 this 关 键 字 作 为 .ingex O 的 参数 ， 将 结果 赋值 给 变量 1inkIndex。 
$('ulstabs li a').bind('click',function () { 
var linkIndex = $('#tabs li a').index(this); 


return false; 


)); 
使 用 索引 号 而 非 一 个 静态 的 类 或 者 ID 名 , 让 我 们 的 脚本 支持 动态 添加 或 删除 标签 等 HTMIL 更 
改 操 作 ， 从 而 避免 像 那些 硬 编 码 的 脚本 一 样 ， 一 旦 遇 到 标签 数量 变化 ， 就 要 修改 脚本 的 情况 。 如 
果 这 个 脚本 支持 任意 数量 的 标签 ， 它 会 具有 更 大 的 价值 ， 因 为 它 更 容易 扩展 。 
当 为 .ingex() 方 法 传人 一 个 参数 ( 选择 器 或 元 素 )， 它 计算 并 返回 该 对 象 的 位 置 号 。 
(11) 再 往 click 事 件 处 理 函 数 中 加 一 条 语句 ， 选 中 所 有 导航 标签 (tabs li a), BER 
tab-active 类 。 这 条 语句 保证 了 同一 时 刻 只 有 一 个 标签 高 亮 。 
$('ulstabs li a').bind('click',function () { 
var linkIndex = $('ul#tabs li a').index(this); 
$('#tabs li a').removeClass('tab-active'); 


return false; 


2); 
(12) 再 加 一 条 语句 到 click 事 件 处 理 函 数 ， 选 中 当前 可 见 的 内 容 元 素 ， 调 用 .hidae () 方 法 将 


其 隐藏 。 
$('ul#tabs li a').bind('click',function () { 
var linkIndex = $('ul#tabs li a').index(this); 
S('ul#tabs li a').removeClass('tab-active'); 
$(".content:visible").hide(); 
return false; 
1); 


(13) 再 加 一 条 语句 到 click 事 件 处 理 函 数 ， 根 据 被 单 击 标签 的 索引 号 找到 相应 的 内 容 元 素 ， 
将 其 显示 出 来 。 该 语句 依据 元 素 的 索引 号 控制 内 容 元 素 的 显示 和 隐藏 。 尽 管 DOM 中 标签 元 素 ( Li ) 
和 内 容 元 素 之 间 并 无 关系 ， 当 单 击 标签 时 , 却 可 以 通过 标签 的 索引 号 找 出 它 对 应 的 内 容 元 素 。 这 
是 一 种 极 好 的 保持 代码 良好 移植 性 的 方法 。 
$('ulstabs li a').bind('click',function () { 

var linkIndex = $('ul#tabs li a').index(this); 

$('uldstabs li a').removeClass('tab-active'); 

$(".content:visible").hide(); 

$(".content:eq("«linkIndex-*")").show(); 


return false; 


1); 

:eq(index) 过 滤器 返回 结果 集中 索引 叶 index 对 应 的 元 素 。 

(14) 在 click 事 件 处 理 函数 中 再 加 最 后 一 条 语句 , 为 被 单 击 的 标签 加 上 tab-active 类 , 让 用 
户 知道 当前 显示 的 是 哪个 标签 。 
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S('ul#tabs li a').bind('click',function () { 
var linkIndex = $('ul#tabs li a').index(this); 
$('ul#tabs li a').removeClass('tab-active'); 
$(".tab:visible").hide(); 
$(".tab:eq("+linkIndex+")").show() ; 
$(this) .addClass('tab-active'); 
return false; 


1): 


如 果 你 的 站 点 或 应 用 程序 使 用 脚本 动态 载 人 标签 及 其 对 应 的 内 容 ， 就 要 改 用 live 方法 绑 定 
click 事 件 。 否 则 ， Te 添加 到 页 面 的 新 元 素 ， 不 会 绑 定 click 事 件 。 

将 所 有 的 HTML、CSS 和 jQuery 代码 组 合 到 一 起 ， 并 在 浏览 絮 中 载 和 这 个 页 面 ， 你 就 会 看 到 
一 个 生动 的 标签 导航 ( 参见 图 6-12 )。 


Mozilla Firefox S 


did- (@) Cx) (tr) http://smashingjquery.com/code/chap06/example-tabnavigation.html p Y) Ch ‘our glands are swolenQ) “@ + 
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[] http;//smashingj...bnavigation.html 
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Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod nunc id mauris placerat iaculis. Integer viverra velit eros, 
sed semper ante. Ut at turpis in tellus tincidunt dignissim non vitae felis. Donec nec sem ut est tincidunt ullamcorper. Donec lorem 
erat, varius eget tempus vel, pulvinar eu massa. Duis eget lacus vel sem gravida sodales eu nec ipsum. Donec vitae est augue, vitae 
sollicitudin elit. Quisque at arcu at eros sollicitudin sagittis id sed dui. Suspendisse est quam, pretium ut gravida a, porta non urna. 
Pellentesque eu eleifend justo. Pellentesque ut eros quam, nec venenatis est. Etiam leo sem, pretium tempus bibendum molestie, 
tincidunt et turpis. Nulla venenatis ante blandit libero commodo imperdiet. 


+ E Console  HTMLv | CSS Script DOM Net Page Speed  YSlow ( KAA] 
R3 | Edit : body < html Style» | Computed Layout DOM 
x < Class="container"> ] I^ | body t tabnav.css (line 30) 
a b tabs" class-"clearfix"» background: none repeat scroll @ @ #8CCAD9; 
<li> } 


<a class="tab-active" href="">Home </a> 


is body, div, dl, dt, dd, ul, ol, li, hi, tabnav.css (line 7) 
a: h2, h3, h4, h5, h6, pre, form, 
<li> fieldset, input, textarea, p, 
«a href-"" style="left: Opx;">Shop </a> blockquote, th, td { 
<li> margin: 8; 
Y <li> padding: 0; 
«a href-"" style="left: Opx;"> Community </a> } 
<i> 
Y <li> 
<a href="" style="left: 0px;"» Customer Service </a> 
</li> 
Y <li> 
<a href-"" style="left: Opx;">About </a> 
<li> 


</ul> 
Y <div class="tab-content"> 
V <div class="tab" style="display: block;"> 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Integer euismod nunc id mauris placerat iaculis. Integer viverra 
T — . velit eros. sed semer ante. ll at turnis in tellus tincidunt - 


af 
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图 6-12 Firefox 浏 览 器 中 通过 Firebug 插 件 显示 的 标签 内 容 脚 本 


生成 可 交互 的 生动 表格 


20 址 纪 90 年 代 末 , 伴随 着 因特网 和 万 维 网 爆炸 性 地 增长 ， 由 于 缺少 设计 和 布局 工具 ， 人 们 经 
常 使 用 表格 做 页 面 设计 和 布局 工作 ， 然 而 这 并 非 表格 的 原本 用 途 。 在 使 用 表格 规划 页 面 布 局 时 ， 
为 了 实现 复杂 的 设计 ， 只 能 使 用 层 层 能 套 的 表格 。 用 表格 设计 和 实现 页 面 布 局 不 仅 缺 少 语义 ， 而 
且 会 因为 层 层 般 套 的 表格 使 页 面 爱 肿 不 堪 ， 对 查看 和 维护 这 些 代 码 的 人 来 说 , 简直 就 是 恶 梦 。 如 
今 ， 绝 大 部 分 Web 设 计 师 和 开发 者 都 使 用 纯 HTML 和 CSS 创 建 具 有 丰富 语义 的 设计 ， 不 再 使 用 表 
格 布局 ， 从 而 实现 了 表现 层 与 内 容 的 分 离 。 

HTML 表 格 之 所 以 被 滥用 为 布局 工具 ， 一 个 最 主要 的 原因 是 由 于 CSS 姗 姗 来 迟 而 造成 布局 工 
具 缺 失 ， 甚 至 在 CSS 规 范 问世 之 后 的 很 多 年 里 ， 浏 览 器 都 不 能 正确 地 支持 CSS。 

表格 因此 (被 滥用 于 布局 ) 臭名 昭著 ,然而 如 果 将 表格 正确 用 于 显示 列表 类 数据 ,就 能 方便 
地 实现 既 干 净 又 结构 良好 的 格式 。 在 这 一 章 里 ,我 将 分 享 一 些 使 用 jQuery 增强 表格 数据 显示 效果 
的 小 技巧 。 
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图 7-1 展 示 的 是 eWedding 网 站 ( www.ewedding.com/packages.php ) 上 一 个 使 用 表格 显示 数据 
的 例子 。 

我 们 可 以 通过 为 表格 添加 样式 让 表格 更 实用 并 且 更 方便 用 户 理 解 。 在 本 解决 方案 中 , 我 使 用 
下 面 的 HTML 表 格 : 


<table border="1" cellpadding="4"> 

<thead> 

<tr> 
<th>Category</th> 
<th>Product</th> 
<th>Price</th> 
<th>Status</th> 

</tr> 

</thead> 

<tbody> 

<tr> 
<td>Clothing</td> 
<td>North Face Jacket</td> 
<td>$189.99</td> 
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<td>In-stock</td> 

</tr> 

<tr> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>Electronics</td> 
<td>LED TV</td> 
<td>$589.99</td> 
<td>Out of stock</td> 

</tr> 

<tr> 
<td>Sporting Goods</td> 
<td>Ping Golf Clubs</td> 
<td>$159.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>Clothing</td> 
<td>Sweater</td> 
<td>$19.99</td> 
<td>In-stock</td> 

</tr> 

</tbody> 

</table> 


eoo eWedding.com 
(a J CO) Gc) (Gf) Cai hae: www.ewedding.com/packages.php WEY cose ajal 
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Packages 


PLATINUM | GOLD SILVER FREE 
$145 inh $99554 SASi Includes 2 weeks 
vem unm", seer meer. Pricing Plan Details 
(2 months free!*) (2 months free!*) (2 months free!*) jor, g 
File Storage (?) Unlimited 1000MB 100MB Limited Get started, it's free. 
From Free to Platinum, we offer a package 
Transfer (2) Unlimited 10GB 5GB 1GB Ui Ed 
Term (2) Unlimited Unlimited Unlimited 1 Year aceasta and lnctonsito Kur Upgreda 
through your control pane! at any time. 
Photo Storage (2) Unlimited Unlimited Unlimited Limited 
To get you started, we're offering new 
D MATES Lea Pan Par = accounts a limited time free 2 week upgrade 
EU]. wedding email (2) + P4 4 = to our popular Gold” package. 
Unlimited Support (2) + 4 ¢7 ¢ 
Unlimited Updates (2) + + 4 4 
-* F: 2 2 


PE Console HTML» CSS Script DOM Net Page Speed Page Speed Activity — YSlow 


ÈB : Edit | strong < td < tr < tbody < table.packages < divpackage table < div.content < div 
Y <tbody> (^| | table.packages td { 
Pp <tr> | background-color: #FFFFFF; 
Y <tr> o border-bottom: 1px solid $DFE7E7; 
«td class-"enpty"» Rnbsp;] </td> border-right: 1px solid #£DF1F1; 
b «td class-"price"» color: #666666; 
> one height: 25px; 
<td class="price"> pode m 
Y <td classe"price’> — : = text-align: center; 
<img height="33" width="112" alt-"price 495" srce"imc.. reli -Ui middle? 
a|| 
<br> Br 局 
el Jarri caption, thy td { See iid: 


L3 


由 ewedding cp 许可 复制 
图 7-1 一 个 用 表格 呈现 数据 的 例子 (eWedding 网 站 上 的 一 些 数据 比较 ) 
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7.1.1. 使 用 过 滤器 创建 条 纹 表格 


Web 设 计 师 经 常 使 用 条 纹 效果 ， 通 过 为 奇数 行 和 偶数 行 设置 不 同 的 背景 色 让 表格 更 容易 阅 
读 。 图 7-2 就 是 一 个 来 自 Performable 网 站 ( www.performable.com ) 的 条 纹 表格 示例 。 我 们 可 以 使 用 
后 端 编程 语言 ( 如 PHP 或 ASPnet ) 实 现 条 纹 效果 , 但 那样 的 话 还 需要 一 位 程序 员 参 与 , 而 使 用 jQuery 
提供 的 :even 和 :odg 过 滤器 ( 无需 劳 程序 员 大 驾 )， 能 极其 容易 地 为 任何 表格 设置 此 类 样式 。 


Web Analytics and Marketing CMS Packages by Performable 


kalea) GS) ( ) (fe) CER C http: //www.performable.com/plans/ Xv) Gy Google Q) err 
@ Disable * Æ Cookies * |) CSS + 回 Forms + |E Images + @ Information + ©? Miscellaneous + / Outline + $3 Resize + JP Tools + [2] View Source * ¿> Options 
| EJ web Analytics and Marketing CMS. + 


We're here to help: 888-268-6035 ^ Customers: Sign in 


£3 Performable 


Home Feature Tour Plans Partners Love About Blog 


Find a Plan for Your Growing Business 


k Basic Small Medium Large Enterprise 


$200/mo. $500/mo. $1500/mo. $5000/mo. Custom 


Performable Web Analytics wv wv wv w wv 
Marketing CMS (Landing Pages) v wv wv wv wv 
Email Campaign Integration wv wv wv wv 
H Effortless CRM Integration wv wv wv 
Email 9-5 Phone 9-5 Phone & 24/7 Phone & VIP. 

Amazing Support Support Support Senior Tech Support Dedicated Consultant Support 


See a Detailed Comparison Sign Up Sign Up Et Sign Up 


Some of Our Happy Customers 


PS sentria EEND 34. Goby © compete rm 


E Done # BB vstow 
由 performable.com 许 可 复制 


图 7-2 Performable.com 站 点 上 一 个 使 用 了 条 纹 效 果 的 表格 
在 document 的 ready 事 件 处 理 函 数 中 添加 两 条 语句 , 使 用 jQuery 过 滤器 分 别 选 取 表格 的 奇数 
行 和 偶数 行 。 第 一 条 语句 选中 所 有 的 偶数 行 并 应 用 浅 灰色 背景 ( #dedede )。 第 二 条 语句 确保 所 
有 的 奇数 行使 用 白色 背景 。 图 7-3 展 示 的 是 页 面 加 载 完成 后 该 例子 在 浏览 器 中 的 输出 。 


$ (document) . ready (function() { 


$('tbody tr:even').css('background', '#dedede') ; 
$('tbody tr:odd').css('background', '#f£ffffFE'); 


1): 
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Mozilla Firefox 


全 -CE (x) Oft). GL http: jwww.smashingjquery.com/code/chapO7 /example-table.html TY) Gax Google Q) r&i- 


@ Disable + Æ Cookies + |. CSS + |] Forms + 于 Images + @ Information + C Miscellaneous * .,/ Outline + 22 Resize * SP Tools + £>) View Source ， Options 
TES Priceline.com | Cheap Flights, H- 9 | [.) http://www.sma...ple-tablehtmi © [P| = 


Category Product Price Status 
Clothing North Face Jacket | $189.99 | In-stock 
Shoes Nike $59.99 | In-stock 
Electronics LEDTV $589.99 | Out of stock 
Sporting Goods |Ping Golf Clubs | $159.99 | In-stock m 
Clothing Sweater $19.99 |In-stock 
# k console HTML | CSS Script DOM Net Page Speed Page Speed Activity — YSlow (  )jeeo 
ÈB : Edit © tr < tbody < table < div.container < body < html Style» | Computed Layout DOM 


Y «dw class="container"> 
Y <table cellpadding="4" border="1"> 
Y <tbody> f } 

| 


elenent.style { 
background: none repeat scroll @ 9 #DEDEDE; 


> «tr style-"background: none repeat scroll 8X 0X rgb(222, 
> «tr style-"background: none repeat scroll 0X 0X rgb(204, 204, 204);"> 
P <tr style-"background: none repeat scroll 0X 0X rgb(222, 222, 222);"» 
P «tr style="background: none repeat scroll 0X 0X rgb(204, 204, 204);"> 
V <tr style="background: none repeat scroll 0X 0X rgb(222, 222, 222);"> 
«td» Sporting Goods </td> 
«td» Ping Golf Clubs </td> 
«td» $159.99 </td> 


[Ez Done 


图 7-3 ”页 面 加 载 完 成 后 的 浏览 器 输出 《所 有 的 偶数 行 都 变 成 了 浅 灰色 背景 ) 


7.1.2 为 表格 中 的 行 添加 简单 悬 停 效 果 


我 们 可 以 为 表格 中 的 行 添加 悬 停 效 果 , 让 表格 对 用 户 的 鼠标 悬 停 动 作出 适当 的 反应 。 在 下 面 
的 例子 中 ,， 当 用 户 把 鼠标 放 到 表格 中 任意 一 行 时 , 我 们 通过 为 当前 行 设置 另 一 种 背景 色 轻 松 地 实 
现 了 这 个 效果 。 图 7-4 展 示 的 是 在 Firefox 中 这 个 例子 的 最 终 效 果 。 

(1) 在 aocument 的 reaqy 事 件 处 理 函 数 中 ， 为 每 个 tz 元 素 绑 定 hovez 事 件 。 这 个 选择 器 的 好 
处 是 它 会 自动 选取 表格 中 所 有 的 行 ， 然 后 使 用 寥寥 几 行 代码 为 它们 绑 定 nover 事 件 处 理 函 数 。 


$ (document) .ready (function()t{ 
$('tr').hover(function() { 

Jr- function() 1 

1): 

ys 


(2) 往 hover 事 件 处 理 函 数 中 添加 两 条 语句 ， 一 条 加 到 mouseenter 事 件 中 ， 一 条 加 到 
mouseleave 事 件 中 。 我 们 使 用 this 关 键 字 引用 触发 事件 所 在 的 当前 tr 元 素 ， 在 mouseenter 事 
件 中 将 行 的 背景 色 设 置 为 粉红 色 ， 在 mouseleave 事 件 中 把 行 的 背景 色 变 回 白色 。 


$ (document) .ready (function(){ 
$('tr').hover(function() { 
$(this).css('background', 'pink'); 
), function() { 
$(this).css('background', 'white'); 
1): 
ys 
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“http: //www.smashingjquery.com/code/chap07/example-highlightrow.html — yy v ) (Ws. Coogle Qe! 
= iz) 3) Information * — Ou e /^ Tools * |. 2 0 
North Face Jacket 
‘Shoes Nike $59.99 In-stock 
Electronics LED TV $589.99 Out of stock 
Sporting Goods Ping Golf Clubs $159.99 In-stock 
Clothing Sweater $19.99 In-stock 
Clothing North Face Jacket $189.99 In-stock 
Electronics LED TV $589.99 Out of stock 
Sporting Goods. Ping Golf Clubs $159.99 In-stock 
Clothing Sweater $19.99 In-stock 
P E Console HTML» CSS Script DOM Net PageSpeed Page Speed Activity YSlow ( )eeo 
&$ : Edit : body < html Style» | Computed Layout DOM 
Dae "Imm exampl..ow.html (line 5) 
P <tr> font-family: arial; 
> <tr style="background: none repeat scroll 0X 0X white; "> i font-size: dass 
> <tr style-"background: none repeat scroll @% 0X white;"> 
P <tr style-"background: none repeat scroll @% 0X white;": 
> «tr style-"background: none repeat scroll 0X 0X white;": 
> «tr style-"background: none repeat scroll 0X 0X pini 
> <tr style-"background: none repeat scroll 0X 0X whi 
b «tr style-"background: none repeat scroll 0X 0X white;"> z 
> <tr style-"background: none repeat scroll @% 0X white; ": 


Eq7-4. HPK RER BE — 11. Eh Firefox] 9, a "P tA HÀ 
(Firebug 已 开启 ; 另 见 彩 插图 7-4 ) 


7.1.3 ”为 表格 中 的 行 添加 高 级 悬 停 效 果 


如 果 我 们 深 入 一 步 ， 就 能 做 到 如 图 7-5 所 示 ， 当 用 户 在 某 行 上 悬 停 时 显示 编辑 选项 ( 此 例 中 
为 Edit Me )。 这 种 用 户 界面 解决 方案 经 常用 于 适合 即时 修改 数据 的 场合 。 

首先 我 们 在 document 的 ready 事 件 处 理 函 数 中 为 所 有 的 tr 元 素 绑 定 nover 事 件 。 添 加 两 条 选 
择 器 语句 , 一 条 用 于 mouseenter 事 件 , 一 条 用 于 mouseleave 事 件 。 在 mouseeneter 事 件 中 , 我 
们 使 用 this 关 键 字 选中 当前 元 素 ， 接 着 调用 appeno 方 法 在 DOM 中 插入 一 个 a (链接 ) 标签 。 当 
用 户 在 某 一 行 上 其 停 时 ， 第 一 条 语句 为 该 行 的 每 一 列 追 加 Edit Me ( 编辑 ) 链接 。 第 二 条 语句 在 
鼠标 离开 时 将 这 些 追加 元 素 ( .editme ) BBR. 


$ (document) .ready (function (){ 
$('tr').hover(function() { 
$(this).children().append('<div class="editme"><a href="">Edit Me</a></div>'); 


}, function() ( 
$('.editme').remove(); 

1); 

1); 
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e Mozilla Firefox 00060 
File Edit View History Bookmarks Tools Help 国 

| & http ://devt lav... hingjquery.htm! | +| b 
Qo b devtlava.cn/test/smashingiqueryhtml v@| EY Bing Qj G wv 16 d 
Œ Most Visitedw d RHAH —Lavatkll-- Lava tA waz 门 分 享 到 Lava 辐 必 应 词典 e httpi/devtlava.c..  |;todo list lava [:]SimpleBits @ 我 的 首页 新 浪 微 博 -… 


Smashing jQuery 是 一 本 挺 棒 的 书 。Edit Me ^ 
Smashing jQuery 是 一 本 挺 棒 的 书 。 
Smashing jQuery 是 一 本 挺 棒 的 书 。 
Smashing jQuery 是 一 本 挺 棒 的 书 。 


oe = | 
$9 o sud = |Y Console HIMLY | CSS Script DOM Net |? | Beg 


k$ | Edit | body < html Style» | Computed Layout DOM 


IDOCTYPE html» This element has no style rules. You can create a rule for it 


Smashing jQuery 是 一 本 挺 棒 的 书 
& «div class="editme"> 
«a href=""> Edit Me </a> 
</div> 


v v) 


meme Druim) a [snippets.conf ... d tu7-5.png - GQ... E [Smashing jQu.. 国 [shuke@arch6.. 图 | | | BE g t © 00:00 
图 7-5 ”鼠标 悬 停 时 显示 即时 编辑 选项 " 


7.2 维护 表格 数据 


现在 我 们 已 经 学 会 为 表格 设置 简单 的 样式 以 及 特效 , 接 下 来 学 习 维 护 表格 中 的 数据 。 这 里 说 
的 “维护 ”是 指 添加 、 删 除 和 过 滤 表 格 数据 ， 这 些 行为 都 会 改变 DOM。 前 面 提 到 的 所 有 选择 器 、 
事件 及 特效 都 能 用 于 表格 数据 。 没 错 ， 我 们 可 以 为 所 欲 为 。 我 会 在 本 节 讲 解 如 何 完 成 以 下 任务 : 
口 在 表格 中 的 第 一 行 或 最 后 一 行 之 后 增加 一 行 ; 
口 基于 行 号 (索引 )， 在 具体 某 一 行 之 后 增加 一 行 ; 
口 在 特定 内 容 的 行 之 后 增加 一 行 ; 
口 使 用 过 滤器 选择 器 删除 一 行 ; 
a 基于 行 号 (索引) 删除 一 行 ; 
口 删除 具有 特定 内 容 的 一 行 。 

在 本 节 的 所 有 教程 中 我 都 使 用 由 以 下 HTML 构 成 的 表格 。 注 意 它 的 结构 ， 图 7-6 是 该 表 在 
Firefox bias P HJEM 


CD 原 书 附 图 有 误 ， 译 者 根据 代码 自行 制作 了 图 7-5。 
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Mozilla Firefox € 


G) D OGU http:/ /www.smashingjquery.com/code/chap07 /example-table.html Wy) QM Goose Q) fe. 
@ Disable + / Cookies + |. CSS + 回 Forms + M| Images * @ Information + ^ Miscellaneous + 7 Outline + 22 Resize * gP Tools + {2) View Source * {> Options 
TD) hrtp:/ jwww.smas... mple-table.html - 
Category Product Price Status | 
Clothing North Face Jacket | $189.99 | In-stock | 
Shoes Nike $59.99 | In-stock 
Electronics LEDTV $589.99 | Out of stock. 
Sporting Goods | Ping Golf Clubs |$159.99 | In-stock | 
Clothing Sweater $1999 |In-stock — | 
9 
P E Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow ( oeo 
kB : Edit body < html Style» Computed Layout DOM 
Y ars " This element has no style rules. 
«head» 
(Co--—————— 
</html> 
C Done # BBA 25.7k oos A 


图 7-6 示例 代码 对 应 的 表格 在 Firefox 浏 览 器 中 的 呈现 


<table border="1" cellpadding="4" id="products"> 

<thead> 

<tr> 
<th>Category</th> 
<th>Product</th> 
<th>Price</th> 
<th>Status</th> 

</tr> 

</thead> 

<tbody> 

<tr> 
<td>Clothing</td> 
<td>North Face Jacket</td> 
<td>$189.99</td> 
<td>In-stock</td> 

</tr 

<tr> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>Electronics</td> 
<td>LED TV</td> 
<td>$589.99</td> 
<td>Out of stock</td> 
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</tr> 

<tr> 
<td>Sporting Goods</td> 
<td>Ping Golf Clubs</td> 
<td>$159.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>Clothing</td> 
<td>Sweater</td> 
<td>$19.99</td> 
<td>In-stock</td> 

</tr> 

</tbody> 

</table> 


7.2.1 在 表格 第 一 行 或 最 后 一 行 之 后 添加 一 行 


我 们 可 以 利用 服务 器 端 程序 实现 动态 添加 页 面 内 容 , 这 需要 请 求 服务 器 , 而且 根据 信息 来 源 
数据 库 的 容量 ,可 能 需要 大 量 处 理 时 间 和 很 高 的 处 理 能 力 。 还 有 一 种 更 简单 的 方式 , 这 就 是 使 用 
jQuery 动态 插入 内 容 。 无论 是 插入 储存 在 某 个 jQuery 函数 中 的 静态 内 容 , 还 是 通过 Ajax 载 入 内 容 ， 
都 不 会 干扰 页 面 的 其 他 行为 。 

假设 打算 在 一 个 搜索 结果 页 的 第 一 条 搜索 结果 之 后 插入 一 条 特殊 信息 , 我 们 能 够 在 表格 中 指 
定 目 标 位 置 , 以 达到 这 一 目的 .这 有 点 类 似 于 谷歌 总 是 把 付费 结果 放 在 每 个 搜索 结果 页 的 最 前 头 ， 
把 所 有 其 他 结果 放 到 付费 结果 之 后 。 

jQuery 支持 我 们 组 合 使 用 :first 过 滤器 和 .after() 方 法 实现 这 一 效果 。Priceline 网 站 
( www.priceline.com ) 在 旅店 搜索 结果 页 采用 了 类 似 于 谷歌 的 做 法 。 如 图 7-7 所 示 ，Priceline 网 站 
上 每 隔 两 家 旅店 就 插入 一 条 特价 信息 。 

接 下 来 我 将 利用 前 面 示例 的 HTML 表 格 , 演示 一 下 在 表格 的 第 一 行 数据 之 后 插入 一 条 特定 信 
BAZAR. 

(1) 新 建 一 个 special 类 , 为 它 设 置 以 下 样式 , 这 样 在 把 它 添加 到 表格 之 后 便 能 够 突出 显示 。 


.Special 
{background:#6AAF18;text-align:center;font-size:22px;color:#fff;font- 
weight:bold; } 


(2) 在 document 的 ready 事 件 处 理 函数 中 添加 一 行 语句 ， 选 中 第 一 个 tr, 然后 使 用 .after () 
方法 在 该 行 之 后 插入 今日 特价 信息 。 


$ (document) .ready (function() { 
$('#products tr:first').after('«tr»«td colspan="4" class="special">Special 
Offer TODAY</td></tr>'); 

ys 


还 有 一 种 可 选 方案 , 即使 用 :1ast 过 滤器 在 表格 的 最 后 一 行 之 后 展示 特定 内 容 。 图 7-8 所 示 为 
以 上 脚本 在 Firefox 中 的 运行 结 


apture Help Qam EIo ose 国人 ;会 * on 12:49AM Q 


Q- CQ) QO Gf). Ca hnp://travela.priceline.com/hotel/searchResults.do?jsk=1f03010a2203010a2( yy ¥ ) a) 


Disable + Æ Cookies ， 了 css + =] Forms + M Images * Information + Miscellaneous * .. Outline * .. Resize * gP Tools * $2) View Source + > Options 
Ed os ^ 
四 Priceline.com - hotel, hotel reserv... | + 


c 


Parc 55 Wyndham San Francisco - Union Square 
太太 太太 San Francisco, CA (San Francisco Downtown) 


$235 


Per Night This downtown San Francisco hotel is one block from Union 
CE ‘Square and the Hallid... More | Rooms | Photos | Map 
‘Guest Rating: 8.3 / 10 | (1159) Guest Reviews » 
[reru | $ Best Price Guaranteed + no priceline change or cancel fees 


see next page 
for fee chop. o “Pay When You Stay"*" Rooms Available | 


Mon Tue Wed Thu Fi Sat Sun 
many wk! $179 $179 $179 $269 $269 $269 $269 


wk2 $268 $235 A 04104201 | EO 
check-out: 
Casa Loma Hotel 配 
$41 San Francisco (California) (San Francisco Downtown) 04/12/2011 
Per Night This European-style hotel is located in San Francisco's Alamo rooms: 
1 Room hd 


rE ‘Square Neighborho... More | Rooms | Photos | Map 
Guest Rating: 8.6 / 10 | (18) Guest Reviews » 


ED Best Price Guaranteed + no priceline change or cancel fees 
gms Mon Tue Wed Thu Fi Sat Sun AvgRate 
discount Dally wat sav gai $41 $41 $41 $41 $41 Book online or call 
Rates a se 1-877-477-8544 
AS pa. 
A fr PAB e Name Your Own Price® Have questions? Click here to chat.) 
信息 ， 就 save up to 
店 信 息 ， 就 half off «Save up to half off other leading online sites 
搬入 一 行 特 [| You choose the price, area and star level 
E * Get your answer in seconds 
TA 
价 信息 
FL Marriott San Francisco Marquis w 
$314 Hkkx San Francisco, CA (San Francisco Downtown) [3 


E Done 
© 1998-2010, priceline.com 


图 7-7 “在 旅店 搜索 结果 页 ，Priceline 每 隔 两 条 旅店 信息 搬 和 人 一 行 特价 信息 


O00 Mozilla Firefox = 


= 
ENN Ceo Qo CD ( http:/ /www.smashingjquery.com/code/chap07 /example-addrow.html Wy) Wi Google Q) iS- 


Disable * Cookies * css + Forms + 34 Images ~ Information * — Miscellaneous ~ Outline + Resize + Tools + View Source + Options 
bl -ooki = f Ila li sz 


[C http://www.smas...ple-addrow.html 

Category Product Price | Status 
Clothing North Face Jacket || $189.99 | In-stock 
‘Shoes [Nike $5999 | In-stock 
Electronics LED TV $589.99 || Out of stock | 
‘Sporting Goods [Ping Golf cubs [$159.99 [In-stock 
Clothing Sweater $19.99 | In-stock 
[Giothing  |[Norn Face Jacket [$189.99 [In-stock | E] 
Shoes Nike $59.99 || In-stock 
Electronics |LED TV 5589.99 [Out of stock 
Sporting Goods | Ping Golf Clubs — | $159.99 | In-stock 
Clothing [Sweater $19.99 [In-stock 


a 


& ^ Edit 


Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity — YSlow ( 


)eeo 
body - html Style» Computed Layout DOM 


Y <div class-"container"» 
Y <table cellpadding-"4" border="1"> 
V <tbody> 
P <tr> 
V <tr style="background: none repeat scroll 0X 0X rgb(204, 204, 204);"> 
<td class-"special" colspan-"4"» Special Offer TODAY </td> 
</tr> 
a 
P «tr style-"background: none repeat scroll 0X 0X rgb(204, 204, 204);"> 
> <tr> 
> <tr style="background: none repeat scroll 0X 0X rgb(204, 204, 204);"> 


M | body { exampl--ow.html (line 5) 


font-family: arial; 
| font-size: 12px; 
} 


<0 


图 7-8 Firefox 中 显示 的 特价 脚本 运行 结 
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有 几 个 扩展 特价 信息 解决 方案 功能 的 点 子 : 

O 加 一 个 定时 器 ， 在 页 面 呈 现 10 s 之 后 再 显示 特价 信息 ， 然 后 等 30 s， 再 让 特价 信息 消失 ; 
QO fit Hl animate () 方 法 为 特价 信息 添加 高 级 动画 效果 ; 
口 利用 cookie， 仅 为 初次 访问 的 用 户 显 示 特 价 信息 。 


7.2.2 ”使 用 过 滤器 选择 器 删除 一 行 


我 在 工作 中 经 常 遇 到 删除 内 容 的 需求 , 不 管 是 临时 删除 还 是 永久 删除 ,都 相当 不 容易 。 我 们 
每 周 发 布 一 次 代码 , 代码 上 线 之 前 需要 编译 并 充分 测试 。 对 网 站 上 绝 大 多 数 的 页 面 来 说 ,这 种 每 
周一 次 的 发 布 方式 无 法 做 到 在 需要 时 对 页 面 进 行 及 时 修改 。 如 果 需 要 快速 修正 一 个 小 问题 ， 比 方 
删除 某 个 产品 、 图 片 、 文 本 或 者 DOM 中 的 某 类 元 素 , 我 们 可 以 使 用 jQuery 的 . remove () 方 法 , 由 
于 无 需 后 端 程序 员 挫 和 这 件 事 ， 他 们 很 开心 。 有 些 时 候 ， 在 工作 时 间 之 外 (程序 员 都 已 经 下 班 ) 
支持 有 限 的 情况 下 ， 网 站 上 会 出 现 不 该 出 现 的 内 容 。 这 时 能 够 使 用 jQuery 快速 地 清理 掉 这 些 内 容 
可 以 及 时 挽回 败局 ， 程 序 员 们 也 得 以 在 第 二 天 从 容 地 从 根 上 解决 这 些 问 题 。 

.remove () 方 法 负责 从 DOM 中 删除 匹配 选择 器 的 元 素 。 

在 aocument 的 *eaqy 事 件 处 理 函 数 中 , 使 用 选择 器 选中 元 素 , 然后 调用 .remove () 方 法 。 在 
本 例 中 选择 器 匹配 的 是 表格 的 最 后 一 个 tr 元 素 ， 下 面 这 条 语句 把 它 从 DOM 中 删除 。 图 7-9 展 示 的 
是 表格 最 后 一 行 被 删除 之 后 的 结 
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[) http://www.smas...removerow.l html. EE = 
| 
|| Category Product Price Status 

Clothing North Face Jacket | $189.99 || In-stock 

Shoes Nike $59.99 | In-stock 

Electronics LED TV $589.99 || Out of stock 


Sporting Goods | Ping Golf Clubs $159.99 | In-stock 


Clothing Sweater $19.99 | In-stock 


Clothing North Face Jacket | $189.99 | In-stock ? 
Shoes Nike $59.99 | In-stock 
Electronics LED TV $589.99 | Out of stock 
Sporting Goods || Ping Golf Clubs — $159.99 || In-stock 
RT Console HTMLy | CSS Script DOM Net PageSpeed Page Speed Activity YSlow eco 
kB | Edit body - html Style» | Computed Layout DOM 
b <head> 


exampl..ow.html (line 5) 


«div class-"container"» 
Y <table cellpadding="4" border="1"> 
了 


body { 
font-family: arial; 
font-size: 12px; 
P; 
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图 7-9 表格 的 最 后 一 行 被 删除 
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$ (document) .ready (function(){ 
$('tr:last').remove(); 


1); 


7.233 ”基于 索引 在 某 一 行 之 后 增加 一 行 


正如 同 我 们 基于 表格 行 的 位 置 找 出 首 行 和 末 行 ， 我 们 也 可 seq OD d dd 
以 基于 行 号 (B51) 找 出 具体 某 行 ， 然 后 在 它 的 前 面 或 后 面 插 VCE) Cal a aaa 


人 一 行 。 在 选择 器 中 使 用 :ea(5) 过 滤器 可 以 找 出 索引 值 为 5 的 所 nngnn 
有 元 素 ， 并 在 这 些 元 素 后 面 插入 Special Offer Today (今日 
特价 信息 )。 


$("tr:eq(5)").after('<tr><td colspan="4">Special Offer TODAY</td></tr>'); 


7.24 基于 索引 删除 某 行 


Od 
O0 


类 似 于 基于 索引 添加 行 ， 我 们 也 可 以 基于 索引 删除 行 。 在 DOM 中 选中 索引 值 为 1 的 所 有 tr 


元 素 ， 然 后 调用 .remove () 删 除 它 们 。 当 然 在 本 例 中 ， 实 际 上 只 有 一 行 : 
$("tr:eq(1)").remove(); 
7.2.5 在 包含 特定 内 容 的 行 之 后 追加 消息 


如 果 需 要 在 包含 特定 内 容 的 行 之 前 或 之 后 插入 一 些 行 , 我 们 可 以 用 :contains 过 滤 需 
前 面 图 7-7 中 Priceline 网 站 的 例子 ， 我 们 可 以 在 表格 中 使 用 这 个 过 滤器 呈现 一 条 特定 的 消 ， 
FUR. 


o KW 
和 给 用 


考虑 这 样 的 场景 : 我 们 在 表格 中 找 出 每 一 个 包含 clothing 字 符 串 的 行 ， 然 后 在 这 些 行 之 后 
追加 一 条 特定 消息 , 也 就 是 特价 信息 的 HTML 代 码 。 这 是 从 DOM 中 挑 出 特别 的 元 素 并 突出 显示 它 
们 的 一 种 很 聪明 的 方式 。 注 意 ，: contains 过 滤器 区 分 大 小 写 。 如 果 目 标 字 符 串 都 是 小 写 的 ， 而 


我 们 指定 了 大 写 的 过 滤 字 符 ， 就 不 会 发 生 任何 匹配 。 

在 页 面 中 使 用 tr 选择 器 ， 结 合 :contains 过 滤器 ， 我 们 能 :contains[] 0 0 
找 出 表格 中 所 有 包含 字符 串 clothing 的 行 , 然后 在 每 个 匹配 行 ” gD 0 DOMO OD 
之 后 插入 一 条 特价 信息 。 图 7-10 展 示 的 就 是 使 用 :contains 过 加 回回 回回 
滤器 添加 了 特价 信息 之 后 的 浏览 器 输出 。 


$('tr:contains("Clothing")').after('«tr»«td colspan="4" class-"special" 
>Special Offer TODAY</td></tr>'); 


D 
D 
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Shoes Nike $59.99 | In-stock 


Electronics LED TV $589.99 | Out of stock 


Sporting Goods || Ping Golf Clubs $159.99 | In-stock 


Clothing Sweater $19.99 || In-stock 


Special Offer TODAY 


Clothing North Face Jacket | $189.99 || In-stock 


Special Offer TODAY 


Shoes Nike $59.99 || In-stock 


Electronics LED TV $589.99 | Out of stock 


Sporting Goods | Ping Golf Clubs $159.99 || In-stock 


Clothing Sweater $19.99 | In-stock 


Special Offer TODAY 
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r> | body t exampl..nd.html (line 5) 
«td» Clothing </td> font-family: arial; 
<td> North Face Jacket </td> font-size: 12px; 
<td> $189.99 </td> } 
«td» In-stock </td> f 
</tr> | 
| 


了 
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图 7-10 使用: contains 过 滤器 添加 特价 信息 


7.2.6 ”基于 元 素 内 容 删 除 一 行 


如 同 能 基于 具体 内 容 添 加 行 , 我 们 也 可 以 基于 行内 的 特定 内 容 删 除 行 。 下面 这 行 语句 选中 含 
有 clothing 字 符 串 的 所 有 tt 元素 ， 然 后 将 它们 从 DOM 中 移 除 。 


$("tr").remove(":contains('Clothing')"); 


7.3 使 用 jQuery 设置 表格 分 页 


分 页 就 是 按照 页 面 大 小 将 内 容 分 成 相应 大 小 的 片段 。 在 网 上 ， 分 页 无 处 不 在 ， 图 7-11 展 示 的 
是 谷歌 搜索 结果 页 的 分 页 。 利 用 分 页 技术 我 们 每 次 可 只 呈现 少数 结果 ， 便 于 用 户 导 航 和 理解 。 

分 页 经 常 是 由 服务 器 端 编程 语言 (如 PHP、ASPNET 和 Java ) 完成 。 使 用 服务 器 端 语言 解决 
方案 的 最 大 好 处 是 网 页 不 必 一 次 载 人 全 部 内 容 , 仅 在 用 户 请 求 时 才 载 人 相应 的 内 容 页 面 。 我 们 也 
可 以 用 jQuery 分 页 ， 不 过 我 建议 把 这 种 技术 仅 用 于 总 结果 较 少 (不 超过 100 个 ) 的 情况 ， 和 否则 会 
导致 页 面 加 载 过 慢 ， 显 著 影 响 网 站 性 能 。 

如 果 是 老手 ， 你 可 以 利用 jQuery 做 到 单 击 一 次 只 载 人 10 条 结果 ， 通 过 Ajax 动态 将 它们 添加 到 
当前 页 面 。 
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© 2010, Google 
图 7-11 谷歌 搜索 结果 页 上 的 分 页 


在 下 面 这 个 分 页 例子 中 , 我 来 讲解 如 何 使 用 寥寥 几 行 jQuery 代码 对 一 个 具有 很 多 行 数据 的 表 
格 进 行 分 页 。 这 个 脚本 自动 根据 你 传人 的 选择 器 参数 对 表格 进行 分 页 , 并 在 内 容 之 后 生成 一 个 导 
航 菜 单 ， 显 示 可 以 单 击 的 页 码 。 当 单 击 一 个 页 码 时 , 该 页 码 会 被 突出 显示 以 便 让 用 户 清楚 正在 显 
示 的 是 第 几 页 。 

(1) 在 创建 分 页 脚本 之 前 ， 我 们 先 准 备 一 些 分 页 需要 数据 。 在 本 例 中 我 使 用 表格 ,但 你 不 必 
拘泥 于 此 ， 任 何 形式 的 数据 ( 无 序列 表 或 一 组 aiv ) 都 行 。 下 面 的 HTML 中 ， 表 格 有 12 行 。 


<table border="0" cellpadding="0" cellspacing="0" id="data"> 

«Ere 
<td>1</td> 
<td>Clothing</td> 
<td>North Face Jacket</td> 
<td>$189.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>2</td> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
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<td>3</td> 
<td>Electronics</td> 
<td>LED TV</td> 
<td>$589.99</td> 
<td>Out of stock</td> 

</tr> 

<tr> 
<td>4</td> 
<td>Sporting Goods</td> 
<td>Ping Golf Clubs</td> 
<td>$159.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>5</td> 
<td>Clothing</td> 
<td>Sweater</td> 
<td>$19.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>6</td> 
<td>Clothing</td> 
<td>North Face Jacket</td> 
<td>$189.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>7</td> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 

<td>8</td> 
<td>Electronics</td> 
<td>LED TV</td> 
<td>$589.99</td> 
<td>Out of stock</td> 

</tr> 

<tr> 
<td>9</td> 
<td>Sporting Goods</td> 
<td>Ping Golf Clubs</td> 
<td>$159.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>10</td> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
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<td>11</td> 
<td>Electronics</td> 
<td>LED TV</td> 
<td>$589.99</td> 
<td>Out of stock</td> 

</tr> 

<tr> 
<td>12</td> 
<td>Sporting Goods</td> 
<td>Ping Golf Clubs</td> 
<td>$159.99</td> 
<td>In-stock</td> 

</tr> 

</table> 


(2) 我 们 利用 表格 的 ID #qata 选 取 这 个 表格 ， 然 后 在 它 之 后 插入 div#nav， 使 其 显示 在 表格 
下 方 。 这 个 #nav 元 素 用 来 存放 页 码 链 接 。 

$('£data').after('«div id="nav"></div>'); 

(3) 创建 变量 rowsshown， 存 放 每 页 展示 行 数 。 

var rowsShown = 4; 

(4) 创建 变量 rowsTotal， 获 取 分 页 数据 的 总 行 数 ， 并 将 它 保存 于 变量 rowsTotal 中 。 在 本 
例 中 ， 先 匹配 #qata tr， 然 后 取 结 果 集 对 象 的 length 属 性 ， 得 到 值 12。 

var rowsTotal = $('#data tr').length; 


(5) 创建 变量 numPages， 它 的 值 为 rowsTotal 除 以 rowsShown。 注 意 运 算 结 果 Math .ceil 这 
个 JavaScript 原 生 方 法 进行 处 理 。Math .ceil 对 一 个 小 数 进 行 取舍 ， 得 到 距离 该 小 数 的 一 个 整数 。 

var numPages = Math.ceil(rowsTotal/rowsShown); 

在 所 有 教程 中 ,创建 了 一 个 变量 之 后 ， 如 果 想 检查 它 的 值 ， 就 插入 一 个 alert 语 句 并 用 括号 
包 住 这 个 变量 ， 比 如 alert (rowsTotal)。 这 个 语句 不 仅 与 jQuery 有 关 ， 它 是 一 个 原生 JavaScript 
函数 ， 也 是 最 重要 的 JS 调试 手段 之 一 。 

(6) 接 下 来 创建 一 个 for 循 环 ， 和 迭代 生成 用 来 导航 的 页 码 链 接 。 创 建 变量 pageNum， 它 的 值 为 
循环 变量 i + 1， 这 就 保证 了 页 码 从 1 ( 而 不 是 从 0 ) 开始 。 接 下 来 使 用 选择 器 选中 #nav 元 素 ， 依 
次 追加 页 码 链接 到 该 元 素 。 页 码 链 接 有 一 个 rel 属 性 , 它 的 值 即 链接 的 序号 ( 从 零 开始 )。 链接 文 
本 则 设置 为 pageNum 的 值 。 


for(i = 0;i<numPages;i++) { 
var pageNum = i + 1; 
S('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> '); 


} 

(7) 添加 一 条 语句 隐藏 表格 #aata 中 所 有 的 行 。 
$('sdata tr').hide(); 

(8) 选取 表格 的 第 一 行 并 将 它 显示 出 来 。 


$('#data tr:first').show(); 


7.3 使 用 jQuery 设置 表格 分 页 153 


(9) 添加 一 条 语句 选取 表格 #data 的 所 有 行 , 然后 使 用 jQuery 的 .slice() 方 法 确保 只 显示 前 4 
行 。.slice( ns ( start 和 eng )， 以 便 截 取 数 组 的 一 部 分 。 

$('#data tr').slice(0, rowsShown) .show() ; 

(10) 增加 一 条 语句 ， 选 中 第 一 个 页 码 链 接 ， 然 后 为 其 添加 active 类 。 这 就 保证 了 页 面 载 人 
完成 后 第 一 个 页 码 处 于 突出 显示 状态 。 

$('#nav a:first').addClass('active'); 

(11) 为 导航 元 素 #nav 内 的 所 有 链接 绑 定 click 事 件 处 理 函数 。 这 个 处 理 函 数控 制 分 页 ， 它 是 
这 个 脚本 的 核心 部 分 。 

$('#nav a').bind('click', function() { 

3); 

(12) click 事 件 处 理 函数 的 第 一 条 语句 ， 移 除 所 有 页 码 链 接 的 active 类 。 


$('#nav a').bind('click', function() { 
$('#nav a').removeClass('active'); 


py 
(13) 然后 为 当前 被 单 击 的 页 号 链接 添加 acitve 类 。 


$('#nav a').bind('click', function() { 
$('#nav a').removeClass('active'); 
$(this).addClass('active'); 

1); 


(14) 新 建 变量 currPage, 保存 当前 链接 的 *el 属 性 值 ( 这 个 值 是 在 前 面 的 for 循 环 中 设置 的 )。 


$('#nav a').bind('click', function() { 
$('tnav a').removeClass('active'); 
$(this).addClass('active'); 
var currPage = $(this).attr('rel'); 


3); 
(15) 再 建 一 个 变量 startItem， 它 的 值 是 currPage 和 rowsShown 的 乘积 。 


$('#nav a').bind('click', function() { 
S('#nav a').removeClass('active'); 
$(this) .addClass('active'); 
var currPage = $(this).attr('rel'); 
var startItem = currPage * rowsShown; 


) 
(16) 再 建 一 个 变量 endItem， 它 的 值 是 startItem 和 rowsShown 的 和 。 


$('#nav a').bind('click', function() { 
$('#nav a').removeClass('active'); 
$(this).addClass('active'); 
var currPage = $(this).attr('rel'); 
var startItem = currPage * rowsShown; 
var endItem = startItem + rowsShown; 
1); 
(17) clLick 事 件 处 理 函 数 中 的 最 后 一 条 语句 控制 单 击 页 码 之 后 显示 哪些 记录 。 使 用 选择 器 选 


取 了 表格 #qata 的 所 有 行 。 本 教程 的 最 终 ET 图 7-12。 
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$('#nav a').bind('click', function() { 
$('#nav a').removeClass('active'); 
$(this).addClass('active'); 
var currPage = $(this).attr('rel'); 
var startItem = currPage * rowsShown; 
var endItem = startItem + rowsShown; 
S$('sdata tr').css('opacity','0.0') .hide().slice(startItem, 
endItem).css('display','table-row').animate((opacity:1), 300); 


1); 


AAA Mozilla Firefox 
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8 Electronics LED TV $589.99 Out of stock 
1 上 日 : 
x = 
+ oy Console HTML» CSS Script DOM Net PageSpeed Page Speed Activity YSlow eco 
&$ | Edit body html Style» | Computed Layout DOM 
Lar "display: none; opacity: @;"> body { exampl..n.html (line 5) 
上 < -"display: none; opacity: 0;"> font-family: arial; 
> <tr style="display: table-row; opacity: 1;"> font-size: 12px; 
> <tr style="display: table-row; opacity: 1;"> H 
> <tr style="display: table-row; opacity: 1;"» 
> <tr style="display: table-row; opacity: 1;"» 
b< a : none; opacity: 0;"> 
>. : none; opacity: 0;"> 
> : none; opacity: > 7 
> <tr style="display: none; opacity: 0;"> $ 
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图 7-12 分 页 教程 在 Firefox 及 Firebug 中 的 最 终 输 出 


7.4 使 用 jQuery 插件 生成 高 级 表格 


jQuery 有 着 非常 大 的 开发 者 社区 ， 这 些 人 编写 了 许多 jQuery 插件 。 我 会 在 第 10 章 讲解 如 何 编 
写 插件 ， 并 点 评 儿 个 值得 推荐 的 流行 插件 。jQuery 插 件 唯 一 的 不 足 之 处 在 于 有 着 太 多 的 选择 ， 有 
些 插 件 代码 质量 不 高 , 缺少 技术 支持 。 通常 我 们 可 以 根据 随 插件 提供 的 文档 质量 判断 一 个 插件 是 
优 是 劣 。 

我 们 可 以 利用 jQuery 自己 编写 表格 排序 和 过 滤 功 能 , 不 过 已 经 有 许多 功能 强大 的 插件 能 做 这 
些 事 。 使 用 插件 能 提高 解决 问题 的 效率 ,， 并且 因为 绝 大 多 数 插件 都 开源 ， 这 为 我 们 提供 了 一 个 很 


好 的 改进 基础 。 我 要 在 这 里 特别 讲解 两 个 插件 tablesorterfllvisualize, 
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7.4.1 使 用 tablesorter 插 件 对 表格 行 排序 


tablesorter 插 件 支 持 我 们 对 任意 表格 排序 。 这 个 扣 


上 件 已 经 问世 好 多 年 了 ， 有 着 良好 的 技术 文 


持 和 极其 出 色 的 文档 。 它 支持 所 有 的 主流 浏览 需 。 表 7-1 列 出 了 tablesorter 方 法 支持 的 一 些 基 


本 配置 选项 ， 这 些 选 项 使 我 们 能 相当 灵活 地 控制 排序 。 


下 面 这 个 教程 使 用 tablesorter 2.0.5 版 本 。 


举 个 例子 ， 假 定 你 有 一 个 记录 数量 超过 100 的 表格 ， 希 望 通过 单 击 某 一 表 头 实现 针对 该 列 的 
排序 ， 对 tablesorter 搬 件 来 说 ， 这 只 是 小 菜 一 矶 儿 。 


对 表格 数据 来 说 ， 使 用 jQuery ( 而 不 是 服务 器 端 排序 ) 的 好 处 在 于 jQuery 排序 更 快 。 如 果 使 


用 服务 咒 端 解决 方案 ， 每 次 重新 排序 都 不 得 不 重新 载 人 和 人 页面， 这 就 要 慢 得 多 。 


表 7-1 tablesorter 配置 选项 
az 项 tik Sk 认 值 
cssAsc 指定 升序 排序 〈 由 小 到 大 ) 时 应 用 于 "headerSortUp" 
标题 的 类 
cssDesc 指定 在 降序 排序 大 到 小 ) 时 应 用 "headerSortDown" 
于 标题 的 类 
cssHeader 指定 未 排序 状态 时 应 用 于 标题 的 类 "header" 
sortForce 用 来 指定 ( 在 用 户 选 择 排 序 基础 上 的 ) null 
强制 排序 字段 
sortList 用 来 指定 如 何 排序 的 columnIndex null 
和 sortDirection 参 数 
sortMultiSortKey 指定 用 于 多 列 排序 的 键 shiftKey 


iE: 要 详细 了 解 tablesorter， 请 访问 http://tablesorter.com/. 


在 下 面 这 个 例子 中 ， 我 们 一 起 看 看 使 用 tablesorter 搬 件 为 一 个 未 排序 的 表格 增加 排序 功能 是 


多 么 容易 。 


(1) 在 应 用 tablesorter 插 件 之 前 ， 我 们 需要 先 准 备 好 表格 ， 否 则 插件 无 法 工作 。 我 们 需要 把 所 
有 的 标题 包 里 于 thead 标 签 中 ， 所 有 的 表格 数据 单元 包 于 于 tbody 标 签 中 ， 就 像 下 面 这 个 表格 的 


HTML 代 码 一 样 。 


<table border="0" cellpadding="0" cellspacing="0" id="data"> 


<thead> 
<tr> 
<th>Item #</th> 
<th>Category</th> 
<th>Product</th> 
<th>Price</th> 
<th>Status</th> 
</tr> 

</thead> 

<tbody> 


<tr> 
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<td>1</td> 
<td>Clothing</td> 
<td>North Face Jacket</td> 
<td>$189.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>2</td> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>3</td> 
<td>Electronics</td> 
<td>LED TV</td> 
<td>$589.99</td> 
<td>Out of stock</td> 

</tr> 

<tr> 
<td>4</td> 
<td>Sporting Goods</td> 
<td>Ping Golf Clubs</td> 
<td>$159.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>5</td> 
<td>Clothing</td> 
<td>Sweater</td> 
<td>$19.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>6</td> 
<td>Clothing</td> 
<td>North Face Jacket</td> 
<td>$189.99</td> 
<td>In-stock</td> 

</tr> 

<tr> 
<td>7</td> 
<td>Shoes</td> 
<td>Nike</td> 
<td>$59.99</td> 
<td>In-stock</td> 

ey Eg 

«tr» 
<td>8</td> 
<td>Electronics</td> 
<td>LED TV</td> 
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<td>$589.99</td> 
<td>Out of stock</td> 
</tr> 
</tbody> 
</table> 


(2) 在 使 用 jQuery 插件 时 ， 我 们 总 是 需要 在 页 头 将 它 包 含 到 页 面 中 。 "我 们 必须 在 使 用 插件 
之 前 先 载 入 插件 ,没有 用 到 该 插件 的 其 他 代码 可 以 放 在 该 插件 之 前 且 但 必须 在 jQuery 库 之 后 ( 必 
须 哦 ! ) 加 载 。 

<script src="js/tablesorter.min.js"></script> 


(3) Æ document 的 ready 事 件 处 理子 数 中 ， 写 一 条 语句 选中 #gata 表 格 ， 然 后 调 
用 .tablesorter() 方 法 。 如 果 我 们 调用 tablesorter 方 法 时 未 提供 任何 选项 ， 就 会 自动 应 用 这 
些 选 项 的 默认 值 ( 参见 表 7-1 )， 表 格 排 序 效果 见 图 7-13。 


$ (document) .ready (function(){ 
$("#data") .tablesorter(); 


}); 
eoe Mozilla Firefox = 
(<)>) Lo) ( x aG LC hmp: / /www.smashingjquery.com/code/chap07 /example-sortable.htmi YY Y //www.smashingjquery. ‘com/code/chap07 /example-sortable. html O Y 
ƏD CSS + | Forms + 3 Images + Ç) Information » Miscellaneous * _/ Ou esiz E a 
3 Electronics LED TV $589.99 Out of stock 
8 Electronics LED TV $589.99 Out of stock 
T" Electronics LED TV $589.99 Out of stock 
2 Shoes Nike $59.99 In-stock 
[4 Shoes Nike $59.99 In-stock 
10 Shoes Nike $59.99 In-stock 
1 Clothing North Face Jacket $189.99 In-stock 
6 Clothing North Face Jacket $189.99 In-stock 
4 Sporting Goods Ping Golf Clubs $159.99 In-stock 
9 Sporting Goods Ping Golf Clubs $159.99 In-stock 
12 Sporting Goods Ping Golf Clubs $159.99 In-stock ” 
5 Clothing Sweater $19.99 In-stock 
EY Console HTML~ CSS Script DOM Net PageSpeed Page Speed Activity YSlow ( )eeo 
k3 : Edit body - html | Stylev | Computed Layout DOM 
a L4 | exampl.-le.html (line 5) 
«div class-"container"» fons Fully: santa 
V <table id="data" cellspacing="0" cellpadding="@" border-"g"> font-size: 12px; — 
Y <thead> 1 
Y <tr> 
<th class="header">Item #</th> 
«th class-"header"» Category </th> 
«th class="header headerSortDown"» Product </th> 
«th class-"header"» Price «/th» " 
«th class-"header"» Status </th> 4 
</tr> M 
= 


图 7-13 ”tablesorter 插 件 已 经 应 用 到 前 而 HTML 代 码 对 应 的 表格 上 


中 为 防止 脚本 阻塞 页 面 演 染 ， 目 前 更 常见 的 实现 是 将 所 有 脚本 文件 包 于 于 页 面 的 body 结 束 标签 之 前 。 
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7.4.2 ”修改 默认 排序 顺序 
过 传人 sortList 这 个 数组 参数 ， 我 们 能 够 改变 默认 排序 的 顺序 : 


[columnIndex, sortOrder] 
在 前 面 我 们 调用 Fablesortezr 方 法 的 那 条 语句 中 ， 这 次 传人 sortList 选 项 参数 。 数 组 中 的 
一 个 数字 是 列 索引 ， 第 二 个 则 指定 排序 方式 (0 表示 升序 ，1 表 示 降 序 )。 

$("#data") .tablesorter ({sortList:[[1,0]]}); 

如 果 和 希望 精确 控制 tablesorter 的 行为 ， 可 以 使 用 表 7-1 中 的 任意 一 个 选项 。 使 用 tablesorter 插 件 
能 非常 容易 地 为 任意 表格 快速 添加 排序 功能 ,使 用 tablesorter 插 件 , 我 们 能 节省 许多 编写 JavaScript 
代码 的 时 间 ， 从 而 把 更 多 的 时 间 用 于 设计 更 易 使 用 、 更 美观 的 表格 。 通 过 传递 不 同 的 CSS 类 选项 
参数 给 tablesorter 方 法 , 我 们 可 以 定制 表格 的 外 观 。 如 果 一 个 页 面 有 多 个 表格 , 并且 和 希望 这 些 
表格 的 样式 各 不 不 同 ， 我 们 就 必须 使 用 这 些 选项 。 


7.4.8 使 用 Visualize 揪 件 为 表格 数据 生成 迷人 的 图 表 


人 们 经 常 使 用 Adobe Flash 生 成 支持 人 机 交互 的 动态 图 表 ， 比 如 图 7-14 中 Google Analytics。 最 
近 ， 一 些 开 发 者 编写 出 了 不 依赖 Flash 并 可 与 Flash 相 媲美 的 jQuery 插件 。Filament 小 组 开发 的 
Visualize 搬 件 对 于 生成 图 表 ， 就 是 一 个 较 好 的 选择 。Visualize 搬 件 支 持 使 用 表格 数据 生成 图 像 、 
线 图 、 柱 状 图 和 人 饼 图 。 它 支持 很 多 选项 ， 这 些 选项 可 设置 和 定制 任何 页 面 上 从 HTML 表 格 中 抽取 
数据 生成 的 图 表 。 表 7-2 列 出 了 Visualize 插 件 的 配置 选项 。 


表 7-2 ”Visualize 配 置 选项 


选 项 描 述 默认 行为 
type 图 表 类 型 柱状 图 
width 图 表 宽度 表格 宽度 
height 图 表 高 度 表格 高 度 
appendTitle 是 否 添 加 标题 是 ,会 添加 标题 
title 图 表 的 标题 使 用 caption 标 签 的 内 容 
appendKey 允许 在 图 上 添加 颜色 图 例 是 ， 将 标题 作为 颜色 标识 
colors 自 定义 颜色 使 用 默认 颜色 
textColors 设置 文本 颜色 N/A 
parseDirection 解析 数据 的 方向 默认 X 轴 
pieMargin 设置 饼 图 周围 的 空白 默认 值 : 20 
pieLabelPos 设置 饼 图 标签 的 位 置 默认 位 置 : 饼 图 之 内 
lineweight 设置 图 表 边 线 的 粗细 默认 值 : 4 
barGroupMargin 设置 柱状 图 各 组 之 间 的 空白 默认 值 : 10 
barMargin 增加 柱状 图 之 间 的 空白 默认 值 : 1 
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Traffic Sources Overview - Google Analytics 


(3)*)- CE) Cx) Oft). CGiliaoaaievcomy https: // www.google.com /analytics /reporting/sources?id=21310¢ yy v ) 人 和 Google 
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© Email 
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400 Q 
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All Traffic Sources aN, 200 
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m Search Engines 
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1,250.00 (18.47%) 
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7-14 Google Analytics 使 用 Flash 生 成 图 表 


ro: ESE 


400 


1.35% M 
B4 BB vsiow 


还 有 一 些 值 得 考虑 的 jQuery 图 表 搬 件 ， 它 们 是 Highcharts Flot, jqplot/jQuery Sparklines。 


7.4.4 生成 柱状 图 


在 下 面 这 个 例子 中 ,我 们 会 看 到 使 用 Visualize 插 件 基 于 表格 数据 生成 柱状 图 有 多 么 容易 。 最 


终结 果 见 图 7-15。 


(1) 在 应 用 Visualize 插 件 之 前 , 我 们 需要 先 准 备 好 表格 ,否则 插件 无 法 工作 。 我 们 需要 把 所 有 
的 标题 包 里 于 thead 标 签 中 ,将 所 有 的 表格 数据 单元 包 于 于 tbody 标 签 中 ， 就 像 下 面 这 个 表格 的 


HTML 代 码 一 样 。 我 们 还 要 为 行 和 列 设置 scope 属 性 。 


scope 属 性 是 一 个 表格 单元 (th/td) 属性 ， 它 用 来 提示 用 户 ( 阅读 或 者 使 用 屏幕 阅读 器 访 
问 页 面 时 ) 哪些 单元 是 标题 。scope 属 性 的 可 取 值 为 col1、colgroup、row 和 rowgroup， 主 要 用 


来 提高 页 面 的 可 访问 性 。 


<table border="1" cellpadding="4"> 
<caption>2010 Traffic</caption> 
<thead> 
<tr> 
<th></th> 
<th scope="col">New Visits</th> 
<th scope="col">Return Visits</th> 
</tr> 
</thead> 
<tbody> 
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<tr> 
<td scope="row">Music</td> 
<td>1000</td> 
<td>3500</td> 

</tr> 

<tr> 
<th scope="row">Sports</th> 
<td>1432</td> 
<td>4633</td> 

</tr> 

<tr> 

$| «th scope="row">Clothing</th> 

<td>1834</td> 
<td>8503</td> 

</tr> 

<tr> 
<td scope="row">Art</td> 
<td>2543</td> 
<td>3472</td> 

</tr> 

<tr> 
<td scope="row">Shoes</td> 
<td>4632</td> 
<td>8493</td> 

</tr> 

</tbody> 

</table> 
e200 Mozilla Firefox c 
WY E» Ge aif XJ Ga) QLI C htp:/ /www.smashingjquery.com/code/chap07 /example-chart 1.html Ww Y) CEL Coogle Qa) iR 
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好 : Edit body < html Style» | Computed Layout 
* «tapie cettpaaaing="4~ voraer="1-> A 
«caption» 2019 Traffic</eaption> body i — 
P <thead> font-size: 62.5X; 
> <tbody> 
</table> 


V <div class-"visualize visualize-bar" aria-label-"Chart representing data from the 
table: 2010 Traffic" role-"img" style="height: 198px; width: 498px;"> 
> <ul class-"visualize-labels-x" style="width: 498px; height: 198px;"> 
> <ul closs-"visualize-labels-y" style="width: 498px; height: 198px; "> 
«canvas height-"198" width-"498"» «/canvas» 
> «div class-"visualize-info"» 


EL 


visual..ght.css (line 2) 


图 7-1$ ”使 用 Visualize 插 件 的 表格 


# Was 48.7k 0.995 d 
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(2) 在 使 用 jQuery 插件 时 , 我 们 总 是 需要 在 页 头 将 插件 包含 到 页 面 中 。 我 们 必须 在 使 用 插件 
之 前 先 载 和 插件。 没有 用 到 该 插件 的 代码 可 以 放 在 该 插件 之 前 且 jQuery 库 之 后 加 载 。 


<script type="text/javascript" 


src="js/visualize.jquery.js"></script> 

(3) 在 aocument 的 ready 事 件 处 理 函 数 中 ， 写 一 条 语句 选中 #qaata 表 格 ， 然 后 调用 .visualize() 
方法 。 调 用 .visualize 方 法 时 要 传人 选项 {type: 'bar'}。 

$ (document) .ready (function(){ 


$('table') .visualize({type:'bar'}); 
yy 


使 用 jQuery 制作 高 级 表单 


表单 在 因特网 上 随处 可 见 , 要 么 是 商用 表单 , 要 么 是 注册 表单 ,或 者 仅仅 是 一 个 搜索 输入 框 。 
表单 验证 脚本 负责 保证 表单 接收 到 正确 的 数据 ， 在 用 户 输入 无 效 数据 时 及 时 显示 清晰 的 错误 信 
E, 并 保证 提交 表单 时 用 户 已 完整 填写 了 所 有 必 填 项 。 表 单 验证 经 党 由 Web 开 发 者 编写 的 服务 器 
端 脚本 ( 使 用 如 PHP、JSP 或 ASP 等 编程 语言 编写 ) 处 理 。 作 为 服务 器 端 验证 C 出 于 数据 安全 考虑 ， 
服务 器 端 验 证 不 可 省 ) 的 补充 ， 客 户 端 验 证 越 来 越 常见 。 会 用 jQuery 和 JavaScript 的 Web 开 发 者 与 
那些 (传统 上 只 熟悉 ) 后 端的 程序 员 相 比 能 打造 更 友好 的 表单 用 户 界面 。 

我 们 在 第 4 章 讨论 事件 时 提 到 ，jQuery 提 供 了 几 个 专门 用 于 表单 的 事件 (focus, blur, 
change )。JavaScript 早 就 支持 这 些 表单 事件 ， 而 jQuery 使 它们 更 易于 使 用 。 本 章 ， 我 将 和 你 一 起 
通过 几 个 实例 了 解 在 表单 处 理 方面 jQuery 能 帮 我 们 多 少 。 本 章 中 的 技术 是 第 9 章 (讲述 了 Ajax ) 的 
基础 。 


8.1 页 面 加 载 完成 后 使 文本 框 获得 焦点 


不 管 是 登录 表单 还 是 注册 表单 ,在 页 面 上 主动 让 表单 的 特定 输入 项 自动 得 到 焦点 , 能 有 效 地 
引导 用 户 直 接 进 行 下 一 步 操作 ， 这 实在 是 一 件 方便 用 户 的 大 好 事 。 如 图 8-1 所 示 ， 只 需 在 页 面 上 


站 点 ， 仅 仅 这 一 点 点 工作 就 能 有 效 地 提高 转化 率 〈 浏览 数 到 购买 数 的 转化 率 )。 
(1) 准备 HTML 表 单元 素 。 在 这 个 例子 中 ,我们 有 两 个 文本 输入 框 ,这 样 页 面 上 就 有 两 个 input 
元 素 ， 我 们 接 下 来 演示 :first 过 滤器 的 用 法 提供 了 条 件 。 


«input type-"textl" /> 
«input type-"text2" /» 


Q) 第 一 条 语句 选取 第 一 个 输入 框 ， 然 后 调用 focus () 方 法 主动 获得 焦点 。 这 就 保证 了 页 面 
加 载 完 成 之 后 ， 第 一 个 文本 框 自动 得 到 焦点 : 


$('input:first').focus(); 


8.2 ”启用 或 禁用 表单 元 素 163 


it View Histor 


M 
Ge: CO) 


E Gy Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity YSlow ( EIE] 
好 ; Edit html Style v pe Layout. DOM - 
" ETE ye 


图 8-1 ”Firefox 中 页 面 加 载 完成 后 ,第 一 个 文本 框 立刻 获得 了 焦点 ( 男 见 彩 插图 8-1 ) 


8.2 启用 或 禁用 表单 元 素 


如 图 8-2 所 示 ， 有 时 我 们 不 希望 用 户 修改 某 个 表单 项 ， 这 时 就 要 启用 或 禁用 表单 元 素 。 一 种 E 
适合 禁用 表单 元 素 的 场合 是 多 页 表单 。 在 第 一 页 ,我们 收集 一 些 类 似 用 户 名 、 密 码 、 电 子 邮件 地 
址 之 类 的 信息 。 第 二 页 ,我 们 收集 账单 地 址 及 支付 信息 ,并 以 禁用 表单 项 的 显示 方式 确认 第 一 页 
传递 过 来 的 信息 AO 
(1) 准备 我 们 希望 禁用 的 HTML 文 本 输入 框 。 
<input type="text" id="name-input" /> 


(2) 添加 一 条 语句 选中 #name-input 元 素 并 调用 .attr () 方 法 把 disapled 属 性 设置 为 true: 


$("#name-input") .attr("disabled", true); 


如 果 和 希望 输入 框 重新 变 得 可 用 ， 只 需要 将 上 一 条 语句 中 的 true 参 数 修改 为 false。 
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eoo jQuery Form Disabled e 
(3) &)- GS) (X) Gf). Gil hup;//smashingjauery.com/code/chapO8/form-disabled.html WY) Mi Goose Q) ið- 
@ Disable + Æ Cookies * L] CSS * £] Forms * $ Images * @ Information * ^. Miscellaneous * ,/ Outline + 5% Resize + ./^ Tools + {2] View Source * 只 Options 
b jQuery Form Disabled 


$ W Console HTMLv | CSS Script DOM Net PageSpeed Page Speed Activity YSlow ( )eeo 
kB | Edit html | Styley | Computed Layout DOM 
Y 
C oeo has no syle rules. 
<head> 
Y <body> 
<input id-"name-input" type="text" disabled-""> 
</body> 
</html> 
EA SBA 711K 0.8085 


图 8-2 调用 .attr() 方 法 禁用 文本 框 之 后 的 表单 


8.3 ”突出 显示 表单 当前 项 


在 比较 大 的 表单 中 , 我 们 通过 突出 显示 表单 当前 项 来 提醒 用 户 所 处 位 置 。 绝 大 多 数 浏览 器 都 
内 建 了 默认 突出 显示 表单 当前 项 的 行为 ， 图 8-3 就 是 Firefox 浏 览 器 中 的 一 个 例子 。 
突出 显示 的 表单 项 


liew Histo 


r Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity YSlow 
d$ ^ Edit © html || Sie» | Computed Layout DOM 


S 


图 8-3 ”Firefox 浏览 器 中 内 建 的 表单 项 突出 显示 效果 ( 男 见 彩 插图 8-3 ) 
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我 们 可 以 使 用 CSS 和 jQuery 的 focus 事 件 设 置 辅助 的 突出 显示 效果 。 通 过 添加 自 定义 的 突出 
显示 效果 , 我 们 能 确保 用 户 知道 自己 位 于 表单 的 什么 位 置 。 如 图 8-4 所 示 , 我 们 可 以 利用 CSS 实 现 
类 似 Wufoo 站 点 ( www.wufoo.com ) 上 这 样 的 突出 显示 效果 。 


as E 
突出 显示 效果 
@ Firefox File Edit View History Bookmarks Tools Window Help E BH © § @ 4  (xk(Charged) Sat 11:55 AM. Q 
eoo Contact Form E 
人 Pi Ce) Cox) (te) COlmufacam https:/ /examples.wufoo.com forms /contact-form/ i v EY Coogle Q) a 
(g) Disable + A Cookies + | CSS ~ | Forms + - Images ~ |.) Information * Miscellaneous * _/ Outline - _ | Resize * . Tools + |. | ViewSource +.’ Options 
[wj Contact Form + 


Contact Form 


Email Address 


(Submit ) 


图 8-4 ”Wufoo 站 点 为 联系 人 表单 添加 了 突出 显示 效果 ( 男 见 彩 插图 8-4 ) 


在 下 面 这 个 例子 中 ,在 用 户 单 击 和 鼠标 或 敲 TAB 键 进入 某 个 表单 项 时 , 我 们 利用 focus 和 blur 
有 件 突出 显示 当前 表单 项 。 脚 本 的 最 终 效 有 果 见 图 8-5。 

(1) 准备 页 面 加 载 完 成 之 后 需要 突出 显示 的 HTML 表单 输入 元 素 。 

<input type="text" id="email-input" /> 

(2) 设置 突出 显示 样式 。 在 本 例 中 ， 样 式 为 带 有 5 px 填充 的 黄色 背景 。 

highlight {background:yellow;padding:5px;} 

(G3) 选 中 所 有 的 input 元 素 并 绑 定 focus 事 件 处 理 函 数 。 在 事件 处 理 函 数 中 添加 一 条 语句 ， 选 
中 this 元 素 ， 添 加 highlight 类 。 这 样 当 该 input 元 素 得 到 焦点 时 《用 户 单 击 它 或 者 使 用 TAB 键 
切换 到 它 时 )， 这 个 输入 项 就 会 自动 应 用 highlight 类 。 


$('input').bind('focus', function() { 
$(this).addClass('highlight'); 
ys 


iini 


166 第 8 章 使 用 jQuery 制作 高 级 表单 


(4) 选中 所 有 的 输入 元 素 并 绑 定 blur 事 件 处 理 函 数 。 在 事件 处 理 函 数 中 添加 一 条 语句 ， 选 中 
this 元 素 ， 移 除 highlight 类 。 这 样 当 该 input 元 素 失去 焦点 时 (用户 离 开 该 表单 项 时 )， 就 会 
被 自动 移 除 highlight 类 。 


$('input').bind('blur', function() { 
$(this) .removeClass('highlight'); 


@ Firefox File Edit View History Bookmarks ools Window Help £X m Gh (Charged) Sat 11:58AM Q 
eoo jQuery Form validation E 
(4)5)- Ce) x) (tr) | { http: //smashingjquery.com/code/chap08/form-highlightfield.htm! uv SB! Google Qa) oe 
= E - | Forms + # Images + Q) Informatio | Miscellaneous + _./ Outline esize = Tools + |. | View Sourc 
[] 

P E Console  HTMLv CSS Script DOM Net Page Speed Page Speed Activity — YSlow ( eco 
&$ Edit © body < html Style» | Computed Layout DOM 
v 
ate This element has no style rules. 
M <body> 
<input id-"email" class=" highlight" type-"text"» 
<input id-"name" type-"text"» 
</body> 
</html> 


图 8-5 ”Firefox 浏 览 器 中 突出 显示 脚本 的 运行 效果 ( 男 见 彩 插图 8-5 ) 


8.4 ”为 文本 框 设置 默认 文本 


为 文本 框 设置 默认 文本 能 帮助 用 户 了 解 这 个 文本 框 中 应 该 填写 什么 内 容 。 为 节省 空间 改进 
表单 设计 , 许多 Web 设 计 师 将 默认 文本 用 作文 本 框 的 标签 。 我 们 可 以 直接 使 用 value 属 性 设置 默 
认 值 ， 不 过 这 样 有 个 问题 ， 当 用 户 单 击 该 项 时 ， 他 们 不 得 不 先 删除 默认 值 ， 然 后 才能 输入 自己 
要 填写 的 内 容 。 图 8-6 展 示 的 是 Laithwaites Wine 网 站 ( www.laithwaiteswine.com ) 的 一 个 页 面 ， 
这 个 页 面 上 的 电子 邮件 新 闻 订 阅 域 ( 位 于 页 面 的 左下 角 ) 就 使 用 了 这 种 简便 的 默认 值 设置 。 
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Laithwaites Wine | buy wine online, exclusive wine club offers, delivery direct to your door 
WY > CE) (X) (ft). Cos http: /www.aithwaiteswine.com/ Wy) QM Goose Q) wir 
@ Disable + Æ Cookies + J CSS + =] Forms » Œ Images + @ Information * ^. Miscellaneous * Ss7 Outline + $3 Resize + jP Tools » f>) View Source + |) Options 
L Lù Laithwaites Wine | buy wine onlin... 


Latest Offers 4 Seasons Wine Club Special Occasion Wines Customer Service About Wine About Us 


Search Wines 
Top Searches 


Mixed Cases 

Top Red Wines 
Top White Wines 
Fine & Rare Wines 


4seas#ns 


a world of wine discovery 


Cabernet 
Pinot Noir 
Top 12 


France 2009 n O . 
Sparkling & Champagne 3 i 
Browse by Type Eu 


Our Top 12 Wines Great Value Bubbly History of Laithwaites 


Once-a-Year-Collection. Order NOW. 


, 
Browse by Country L 
Browse by Region > 
Browse by Grape > Laithwaites Recommends 
Browse by Price k Big Fall Reds 100% Money-Back Guarantee 
Special E-mail Updates ue We're so confident in the quality 
Learn More of our wines that we guarantee 


The quickest way to hear about 
exciting new wine offers. 


Charles Smith Youve lots tobe excited | | be refunded in full. No problem. 
Enter email address k Collection about this month! 

This special collection will View AII Fall Specials Tony Laithwaite 
[ Sign up Now ] sell out fast. Founder, Laithwaites Wine 


[C] Transferring data from ping.chartbeat.net..  —  ăć  ć - # Wa Ysiow 


H Laithwaiteswine.comi/T n] 42 iil 
图 8-6 Laithwaites Wine 网 站 上 的 一 种 默认 文本 的 简单 实现 方式 


使 用 下 面 的 脚本 我 们 可 以 为 一 个 文本 框 设置 默认 文本 。 如 果 用 户 单 击 该 文本 框 , 默认 文本 消 
R, 然后 用 户 就 可 以 输入 自己 想 填 写 的 内 容 。 如 果 用 户 什么 也 没有 填写 就 离开 了 文本 框 , 默认 文 
本 则 会 自动 重新 显示 。 这 个 脚本 使 用 focus 和 blur 事 件 实现 了 这 种 效果 (工作 中 的 脚本 示例 见 
图 8-7 )。 

(1) 准备 用 来 存放 默认 文本 的 表单 元 素 input 文 本 框 : 

<input type="text" id="email-input" value="Search"/> 

(2) 创建 一 个 变量 ， 存 放 计划 显示 在 文本 框 中 的 默认 值 : 

var defaultText = "Search"; 


(3) 选中 #emai1-input 元 素 ， 然 后 绑 定 focus 事 件 处 理 函 数 : 


$("#email-input").bind('focus', function() { 
1); 


(4) 在 focus 事 件 处 理 函 数 中 ， 添 加 一 条 if 语句 检查 文本 框 (使 用 this 关 键 字 ) 的 值 。 如 果 
文本 框 有 值 并 且 它 的 值 与 defaultText 相 同 , 清除 文本 框 的 值 。 不 管 文本 框 是 否 有 值 ， 都 把 文本 
的 颜色 修改 为 #333 RKE )。 


$("#email-input").bind('focus', function() { 
if ($(this).val() == defaultText) { 
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S(this).val(''); 


$(this).css('color', '#333') 
1); 
默认 文本 
000 jQuery Form validation = 
(<4) )~ CS) CX Cf) Q http: //smashingjquery.com/code/chap08/form-defaulttext.html uv) Gag Coogle Q) 型" 
( Disable + Æ Chokies + I CSS + 器 Forms + W. Images + @ Information + ^; Miscellaneous * 7 Outline + $3 Resize + gP Tools + f>) View Source + ¿© Options 
ID jQuery Form validation F = 
Search Submit 
+ E Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow eco 
k$ : Edit body - html Style» Computed Layout DOM 
v 
hist This element has no style rules. 
> <head> 
T= 和 = 全 ==* 
«div id="email-form"> 
<input id-"email- 
input" type="text" value="Search" maxlength-"20" name="keyword"> 
«input id-"email-submit" type="submit" value="Submit"> 
</div> 
</body> 
</html> 
lii Done A BBA 7L9k o495s A 


图 8-7 ”页 面 加 载 完成 之 后 ， 文 本 框 中 自动 填充 了 默认 文本 


(5) 接 下 来 ， 设置 #email-input 失 去 焦点 时 要 触发 的 plur 事 件 。 


$("#email-input") .bind('blur', function() { 
1); 
(6) 在 bluz 事 件 处 理 函 数 中 ， 添 加 一 条 类 似 的 if 语句 ， 检 查 this 的 值 。 如 果 没 有 内 容 ， 则 将 


它 值 设 置 为 aeafultText。 同 时 ， 把 文本 的 颜色 设置 为 #FFF。 
$("temail-input").bind('blur', function() { 


if ($(this).val() == '') { 
$(this) .val (defaultText) 


$(this).css('color', '#FFF') 
1); 
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8.5 限制 文本 输入 框 的 输入 字数 


在 类 似 输入 个 人 状态 信息 等 需要 限制 字数 的 输入 场合 ， 都 需要 限制 字符 输入 个 数 的 脚本 。 
20104E, Twitter ( www. twitter. com ) 上 140 个 字符 的 限制 使 得 限制 字符 个 数 的 脚本 的 大 流行 ， 不 
过 把 自己 的 个 人 状态 信息 限制 为 140 个 字符 或 以 内 终归 是 一 个 挑战 。 当 限制 用 户 输入 字符 数 时 ， 
字符 数 限制 脚本 还 能 显示 出 剩余 〈 尚 可 输入 的 ) 字符 数 。 

在 本 教程 中 ， 我 将 介绍 如 何 利 用 jQuery keypress 事 件 编写 如 图 8-8 所 示 的 ， 类 似 Twitter 上 发 
表 短 于 140 字 符 的 状态 信息 时 的 提示 效果 。 


eoo Mozilla Firefox S 
eh 站- ES) Cx) Gf). CO htp://smashingjquery.com/code/chap04/example5-6.html uv) GAY Coogle Q) i 
@ Disable + Æ Cookies + J CSS + E] Forms + [E Images + @ Information + C Miscellaneous * ./ Outline + 27 Resize * gP Tools + $2) View Source + 1 Options 
[O http://smashingj...example5-6.html It 


Hello jQuery. 


This is my special text limiter! 


-69 


X" Console | HTML~ | CSS Script DOM Net Page Speed Page Speed Activity YSlow )eeo 


B Edit body < html Stylev Computed Layout DOM 


exampleS-6.html (line 5) 
round: none repeat scroll 0 0 n 
arial; 


La TCR NA 
图 8-8 在 用 户 输入 文本 时 这 个 脚本 会 实时 计算 剩余 字符 数 

(1) 第 一 步 还 是 准备 HTML。 我 们 使 用 textarea#status。 我 们 将 使 用 它 的 keypress 事 件 检 
测 文 本 框 中 输入 的 字符 数 。 

<textarea cols="50" rows="5" id="status"></textarea> 

(2) 添加 一 个 空白 的 daiv#counter 元 素 ， 用 它 存放 输入 字符 过 程 中 计算 出 来 的 剩余 字符 数 。 

<div id="counter"></div> 

(3) 新 建 一 个 变量 maxNum， 保 存 允 许 输入 的 最 大 字符 数 ， 这 里 我 们 把 它 设置 为 100。 

var maxNum = 100; 


(4) 选中 #status 元 素 , 然后 为 它 绑 定 keypress 事 件 处 理 函 数 。keypress 事 件 发 生 于 一 个 键 
被 按 下 然后 释放 时 ， 它 是 检测 文本 框 中 用 户 输入 的 最 佳 事件 。 
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$('#status') .bind({ 
keypress : function() { 
} 

1); 


(5) 当 keypress 事 件 发 生 时 ， 我们 需要 捕获 #status 输 入 框 中 的 内 容 。 我 们 创建 一 个 变量 
inputText 保 存 输入 框 的 值 ， 再 创建 一 个 变量 numchar 保 存 inputText 的 length 属性 ( 长度 )。 
接 下 来 ,我 们 再 创建 一 个 变量 charRemain， 保 存 剩 余 字 符 数 。 


$('#status') .bind({ 
keypress : function() { 
var inputText = $(this).val(); 
var numChar = inputText.length; 
var charRemain = numChar - maxNum; 


1); 


(6) dy eoo EJ. Ed HERI TAR Anmar mh ^P TmaxNum. A4 
小 于 等 于 ， 就 选中 #countezr 元 素 ， 并 修改 它 的 文本 为 剩余 的 字符 数 ( charRemain )。 


$('sstatus').bind(( 
keypress : function() ( 
var inputText = $(this).val(); 
var numChar - inputText.length; 
var charRemain - numChar - maxNum; 
if (numChar «- maxNum) ( 
$('tcounter').text(charRemain); 


aH 


} 


1); 


(7) 最 后 再 加 一 条 else if 语句 检查 numchar 是 否 大 于 maxNum， 如 果 为 真 ， 使 用 
event .preventDefault () 阻止 用 户 输入 更 多 的 字符 。 


$('#status') .bind({ 
keypress : function() { 

var inputText = $(this).val(); 

var numChar = inputText.length; 

var charRemain = numChar - maxNum; 

if (numChar <= maxNum) { 
$('#counter').text (charRemain) ; 

} else if (numChar > maxNum) { 
event.preventDefault(); 


} 


1); 


8.0 ”实现 复 选 框 的 全 选 功能 


我 们 可 以 用 jQuery 实现 复 选 框 的 全 选 与 反选 功能 ， 在 网 站 的 选项 部 分 经 常会 用 到 这 一 功能 。 
用 户 会 看 到 20 个 左右 的 复 选 框 和 一 个 允许 一 次 单 击 全 部 选中 的 链接 。 在 下 面 这 个 教程 中 , 我 们 使 
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Oo 
CN 
Sy 
当 


Check All 复 选 框 


# oy Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow 人 KA] 
&$ : Edit : body < html Sylev | Computed Layout DOM 

Y <html> 

> <head> | 

"CTS | 

<input id-"checkall" type="checkbox"> | 

«label» Check all </Label> | 

V <ul id-"form-fields"> | 

Y <li> | 

| 

| 

| 

| 

| 

| 


This element has no style rules. 


<input class-"check" type="checkbox" name="check1"> 
«label» Checkbox 1</label> 
</li> 
Y <li> 
<input class-"check" type="checkbox" name="check2"> 
<label> Checkbox 2</label> 
«ni» 
Y ài 
<input class="check" type="checkbox" name="check2"> 
«label» Checkbox 3«/label» 
<li> 
Y di> 


aire 


图 8-9 ”Firefox 浏 览 器 下 的 Check All 复 选 框 ，Firebug 面 板 实时 地 展示 input 项 的 变动 情况 


(D 首先 ， 我 们 准备 5 个 复 选 民 元素 ， 将 它们 时 于 无 序列 表 ul#form-fielas 中 , 并 为 生得。 
选 杠 元 素 添加 类 check。 


<ul id="form-fields"> 

«li»«input name="checki" class-"check" type="checkbox"/> <label>Checkbox 
1«/label»«/li» 

«li»«input name-"check2" class-"check" type-"checkbox"/» «label»Checkbox 
2«/label»«/li» 

«li»«input name-"check2" class-"check" type-"checkbox"/» «label»Checkbox 
3«/label»«/li» 

«li»«input name-"check2" class-"check" type-"checkbox"/» «label»Checkbox 
4«/label»«/li» 

«li»«input name-"check2" class-"check" type-"checkbox"/» «label»Checkbox 
5«/label»«/li» 

</ul> 


(2) 在 无 序列 表 之 前 添加 一 个 复 选 框 input#checkal1。 这 个 复 选 框 用 来 控制 对 下 面 $ 个 复 选 
框 的 选中 或 反选 。 


<input type="checkbox" id="checkall" /> <label>Check all</label> 
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(3) 选中 #checkal1 元 素 ， 为 它 绑 定 click 事 件 。 


$('#checkall').bind('click', function()( 
1); 


(4) 新 建 变量 checkboxes 选 中 所 有 的 1i 元 素 并 在 其 中 寻找 所 有 的 .check 元 素 ( 复 选 框 )， 然 
后 将 匹配 的 结果 集 保 存 到 变量 checkboxes。 


$('#checkall').bind('click', function()( 
var checkboxes = $('#form-fields li').find('.check'); ? 
1); 


(5) 如 果 我 们 还 需要 取消 全 选 功 能 ， 可 加 一 条 if/else 语 名 检查 #checkaA11 元 素 的 状态 ， 如 
果 是 选中 状态 ， 就 设置 保存 在 checkboxes 变 量 中 的 复 选 框 结果 集 中 的 每 一 个 复 选 框 的 checked 
属性 为 true， 反 之 则 设置 为 false。 


$('#checkall').bind('click', function() { 
var checkboxes = $('#form-fields li').find('.check'); 
if (this.checked) { 


checkboxes.attr('checked', 'true'); 
} else ( 
checkboxes.attr('checked', 'false'); 


hi 
1); 


在 浏览 器 中 测试 上 面 的 代码 ， 你 会 发 现 这 个 管理 多 复 选 框 选 择 全 部 /取消 全 选 的 功能 既 流 畅 
又 灵活 。 


8.7 ”获取 文本 输入 框 的 值 


如 图 8-10 所 示 , 获取 文本 框 的 值 是 非常 基础 的 表单 技术 , 但 这 项 技术 在 很 多 场合 都 非常 有 用 。 
它 的 用 法 极其 容易 ， 可 用 于 许多 应 用 程序 。 在 使 用 Ajax 传送 所 有 表单 项 的 值 到 服务 器 时 ， 我 经 常 
使 用 这 一 技术 。 我 会 在 第 9 章 和 大 家 一 起 探讨 Ajax 应 用 。 

(1) 准备 HTML 表 单 输入 元 素 ， 我 们 即将 获取 的 就 是 它 的 值 。 

<input type="text" name="special" id-"my-input" value="Very Cool!"/> 

(2) 选取 my-input 元 素 并 调用 .val () 方 法 。 

$("#my-input").val(); 

为 了 查看 刚刚 是 否 获取 到 了 值 , 我 们 需要 将 #my-input 元 素 的 值 赋 给 一 个 新 建 变量 , 然后 就 
可 以 用 alert 函 数 查看 是 否 真 的 得 到 了 文本 框 的 值 。 

(3) 新 建 一 个 jnputval 变 量 ， 用 它 保存 第 二 步 得 到 的 值 : 


var inputVal = $("#my-input").val(); 


O 这 一 名 也 可 以 简写 为 var checkboxes = $('#form-fields input');， 更 直观 ,也 更 容易 理解 。 
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jQuery Form Value 
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x Console» HTML CSS Script DOM Net ”Page Speed Page Speed Activity — YSlow ( eco 
l | Clear Persist Profile 
Jake Rutter 


# BBA 712K 0.4755 
图 8-10 ”通过 Firebug 控 制 台 捕获 并 显示 出 来 的 值 


如 果 和 希望 在 #my-input 元 素 的 值 改变 时 得 到 变化 之 后 的 新 值 , 就 把 上 面 的 语句 放 到 该 元 素 的 
change 事 件 处 理 函数 中 。 
(4) 将 上 面 的 语句 放 到 #my-input 元 素 的 change 事 件 中 ， 这 样 就 保证 了 输入 框 中 的 文字 改变 
时 ， 我 们 得 到 的 值 总 是 最 新 的 。 
$('#my-input').change(function() { 
var inputVal = $('#my-input').val(); 


alert (inputVal) ; 
Xy 


注意 ， 有 些 浏览 需 〈 包 括 Opera ) 中 ， 在 文本 框 中 的 文字 发 生变 化 时 ，change 事 件 并 不 是 马 
上 发 生 ， 而 是 在 焦点 离开 文本 框 时 才 发 生 。 
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在 各 种 站 点 应 用 中 ， 使 用 jQuery 获取 select 元 素 的 值 既 容易 又 有 用 。 图 8-11 展 示 的 是 
Crutchfiled.com 网 站 (一 家 汽车 /家 用 音响 电器 网 站 ) 中 outfitmycar (配置 我 的 爱 车 ) 功能 区 
域 使 用 这 个 功能 的 一 个 例子 。Crutchfield 人 允许 你 选择 车 的 购买 年 份 、 型 号 和 制造 商 。 每 做 一 个 选 
择 ， 系 统 就 获取 你 选择 的 值 ， 并 利用 它 过 滤 显 示 另 一 个 选项 列表 。 
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图 8-11 Crutchfield.com 配 置 爱 车 向 导 
(1) 准备 用 来 获取 选项 值 的 select 元 素 。 


«select id="my-select" name="questionl"> 
<option value="yes">yes</option> 
<option value="no">no</option> 

</select> 


(2) 选中 #my-select 元 素 ， 然 后 为 它 绑 定 change 事 件 处 理 函 数 : 


$('#my-select').change(function() { 
1); 


(3) 获取 当前 选中 项 的 值 ， 并 把 它 赋值 给 变量 selectVal: 


$('#my-select').change(function() { 
var selectVal = $(this).val(); 
alert (selectVal) ; 

1); 
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在 一 个 网 站 上 , 对 消息 订阅 的 注册 表单 来 说 电子 邮件 验证 分 外 重要 。 如 果 用 户 提 交 了 不 良 的 
电子 邮件 地 址 ， 数 据 库 清理 工作 既 费 时 间 又 费 金钱 。 只 需要 很 少 的 代码 ， 我 们 就 能 使 用 jQuery 为 


8.9 


简单 验证 表单 中 的 电子 邮件 
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表单 添加 简单 的 电子 邮件 验证 。 这 类 脚本 非常 有 用 ， 就 像 图 8-12 所 示 的 注册 电子 邮件 获取 特价 
Laithwaites Wine 供 应 信息 的 例子 , 我 们 并 不 需要 像 高 级 验证 程序 那样 验证 好 多 字段 分 属 不 同类 型 
的 数据 。 我 会 在 本 章 的 末尾 演示 使 用 一 个 常见 的 jQuery 验证 捅 件 对 表单 进行 高 
牢记 住 , 永远 不 要 仅仅 依赖 客户 端 JavaScript 验 证 , 不 管 客户 端 验证 是 否 可 用 , 服务 器 端 验证 必 不 


可 少 。 
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PR 
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图 8-12 Laithwaites Wine 站 点 的 新 消息 账号 注册 链接 使 用 简单 的 电子 邮件 验证 
下 面 的 代码 使 用 正则 表达 式 检查 用 户 提交 的 电子 邮件 地 址 格式 是 否 正 确 。click 事 件 处 理 函 


数 绑 定 在 Submit 按 钮 上 ， 因 此 仅 在 用 户 提交 表单 时 才 验 证 。 脚 本 会 根据 验证 结果 (是 否 已 输入 电 
子 邮 件 地 址 及 其 是 否 有 效 ) 显示 成 功 或 各 种 错误 消息 。 如 图 8-13 所 示 ， 当 检测 到 用 户 输入 不 符合 


电子 邮件 地 址 格式 时 ,会 突出 显示 


日 一 foe 
条 提示 信 息 , 


提醒 用 户 应 该 输入 正确 格式 的 电子 邮件 地 址 。 


正则 表达 式 是 匹配 文本 和 数字 字符 串 的 特殊 模式 ， 广 泛 用 于 匹配 电子 邮件 地 址 、 电 话 号 码 、 
邮政 编码 、 信 用 卡号 码 等 。 在 绝 大 多 数 Web 编 程 语 言 中 ,使 用 正则 表达 式 都 是 标准 做 法 ,我们 可 
以 从 网 上 寻找 需要 的 正则 表达 式 用 于 自己 的 脚本 。 


(1) 首先 我 们 创建 一 个 非常 简单 的 电子 邮件 表单 ， 它 只 有 一 个 电子 邮件 输入 框 和 一 个 Submit 


(提交 ) 按钮 。 


«div id="email-form"> 
<input type="text" id="email-input" 
<input type="submit" value="Submit" 
</div> 


name="email"/> 
id="email-submit" 


name="submit"/> 
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jQuery Form validation 
wr) ig i Google Q) LS 
+ J Tools + $>) View Source * > Options 
[= 


(a) e)- Ce) x) GA) Q hup://smashingjquery.com/code/chap08/form-validation.htmi 
* [E Images * @ Information + > Miscellaneous * -27 Outline + $3 Resize 


@ Disable + Æ Cookies + J CSS + ©] Forms 
] n jQuery Form validation + 


Please enter a valid email address. 


dsfhks (Submit) 


r Console HTML» | CSS Script DOM Net PageSpeed Page Speed Activity YSlow 
Style» | Computed Layout DOM 


kB: Edit body < html 


V <html> 
> <head> 
E 
<div id="email-form"> 
«div class="error">Please enter a valid email address. </div> 


<input id-"email-input" type="text"> 
<input id-"email-submit" type="submit" value="Submit"> 


This element has no style rules. 


</div> 
</body> 
</html> 


BA 721K 0.4725 


8-13 er FAP f ARS ra THIS A SS SUI IE BR, Ei Submit ( 提交 ) 按钮 时 会 


显示 一 条 提示 信息 
(2) 选 中 #email1-submit 按 钮 并 为 它 绑 定 click 事 件 处 理 函 数 。 在 click 事 件 处 理 函 数 中 , s 
加 一 条 return false 语 句 ， 这 就 确保 了 用 户 在 单 击 Submit 按 钮 时 ， 脚 本 会 中 止 表单 默认 的 提交 


行为 。 
$("#email-submit").bind('click', function() { 


return false; 
NS iE. 


1); 
(3) 创建 一 个 变量 emailReg, 然后 把 检测 电子 邮件 合法 性 的 正则 表达 式 赋值 给 这 


> 
ay 


; 


$("temail-submit").bind('click', function() { 
var emailReg = /*([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+S/; 


return false; 
1); 
(4) 创建 一 个 变量 
function()( 


$("#email-submit") .bind('click', 
var emailReg = /*([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+S/; 


email, j[temail -input 的 值 赋 给 它 


$("#email-input").val(); 


var email = 
return false; 


is 
(5) 选中 #emai1l-form 元 素 并 在 表单 内 容 之 前 插入 一 个 div.error。 我 们 使 用 它 存放 必要 时 


显示 给 用 户 看 的 出 错 信 息 。 


N 
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$("#email-submit") .bind('click', function() { 


var emailReg = /^([a-zA-Z0-9 .-])«G(([a-zA-Z0-9-]) *.) * ([a-zA-Z0-9] (2, 4)) *$/; 
var email = $("femail-input").val(); 


$('#email-form') .prepend('<div class="error"></div>'); 
return false; 


1): 
(6) 添加 一 条 else if 语句 ， 当 用 户 单 击 Submit 按 钮 时 用 它 检 查 用 户 是 否 键 信 了 内 容 。 


$("#email-submit") .bind('click', function() { 


var emailReg = /^([a-zA-Z0-9 .-])-«G(([a-zA-Z0-9-])*.)*([a-zA-Z0-9] (2, 4)) *$/; 
var email = $("femail-input").val(); 

$('#email-form') .prepend('<div class="error"></div>'); 

if(email == '') { 

} else if { 

} else { 


} 


return false; 


} 
(7) 在 if 子 句 中 (用户 没 有 输入 任何 东西 时 )， 选 取 div.error， 和 替换 成 失败 提示 信息 。 
$s("#email-submit") .bind('click', function() { 

var emailReg = /^([a-zA-20-9_.-])+@(([a-zA-20-9-])+.)+([a-zA-20-9] (2, 4)) *$/; 

var email = $("#email-input").val(); 

$('#email-form') .prepend('<div class="error"></div>'); 

if(email == '') { 

$(".error") .replaceWith('<div class-"error"»You forgot to enter an email 


address.</div>'); 
} else if { 
} else { 

} 

return false; 


i 
(8) 在 else if 子 句 中 (用户 输 入 了 不 合法 的 电子 邮件 地 址 )， 选 中 aiv_ error 元 素 ， 替 换 成 gg 
错误 格式 信息 。 这 里 的 else it 语句 使 用 正则 表达 式 测试 用 户 输入 的 电子 邮件 格式 是 否 合法 。 


$("femail-submit").bind('click', function() { 
var emailReg = /*([\w-\.]+@([\w-]+\.)+[\w-]{2,4}) ?S/; 


var email = $("#email-input").val(); 
$('#email-form') .prepend('<div class="error"></div>'); 
if(email == '') { 
$(".error") .replaceWith('<div class="error">You forgot to enter an email 
address.</div>'); 
) else if (!emailReg.test(email)) { 


$(".error").replaceWith('«div class="error">Please enter a valid email 
address.«/div»'); 


) else { 
} 
return false; 


Fy 


(9) 最 后 ， 添 加 一 条 el se 语句 ， 将 #emai1-form 表 单元 素 的 内 容 替 换 为 一 条 提示 信息 ， 告 诉 
用 户 他 们 已 经 成 功 订阅 。 这 条 消息 当日 仅 当 if 及 else if 语 句 均 检测 失败 时 才 显 示 出 来 。 
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$("temail-submit").bind('click', function() { 
var emailReg = /*([\w-\.]+@([\w-]+\.)+[\w-]{2,4}) ?$/; 


var email = $("#email-input").val(); 

S$('temail-form').prepend('«div class="error"></div>'); 

if(email == '') { 
$(".error") .replaceWith('<div class="error">You forgot to enter an email 
address.</div>'); 

} else if(!emailReg.test(email)) { 


$(".error") .replaceWith('<div class="error">Please enter a valid email 
address.</div>'); 
} else ( 
S$("temail-form").html('«div class-"success"»Thank you, you have been 
subscribed.«/div»'); 
} 
return false; 


}); 

下 面 是 改进 这 个 脚本 的 一 些 建议 。 

O 如 有 果 和 希望 在 用 户 输 入 数据 时 实现 实时 检测 , 可 以 把 绑 定 到 Submit 按 钮 上 的 click 事 件 改 为 
绑 定 到 input 元 素 上 的 change 事 件 。 这 样 的 话 就 需要 再 加 一 些 代码 ， 以 保证 用 户 看 到 正 
确 的 提示 信息 〈 对 输入 内 容 的 要 求 等 )。 

口 知 用 户 提交 了 错误 格式 的 电子 邮件 地 址 ,为 电子 邮件 输 

入 框 增加 突出 显示 效果 。 

口 参考 表 8-1 中 常用 的 正则 表达 式 为 表单 添加 更 多 的 字段 ， 
验证 其 他 类 型 的 数据 。 


[II FUE o REP o 
OOOUU0U0*!0000 
UUOUU0O0O0U000 


表 8-1 另外 一 些 用 于 表单 验证 的 常见 正则 表达 式 


A B 例 F 
电话 号 码 (/~^[0-9-+]+$/) 
日 期 ( dd/mm/ yyyy ) (/*\d{1,2}\/\d{1,2}\/\d{4}$/) 
仅 数字 (^[0-9]«$) 
仅 字 母 (*[A-Za-z]+$) 


8.10 复制 一 个 文本 框 的 内 容 到 另 一 个 文本 框 


如 果 曾 经 在 网 上 买 过 东西 , 那 你 很 可 能 有 过 不 得 不 填写 账单 地 址 和 收 货 地 址 的 经 历 。 对 绝 大 


多 数 顾 客 来 说 ,这 两 个 地 址 相同 ,因此 这 类 表单 往往 有 一 个 Same As Billing Address ( 与 账单 地 址 
相同 ) 的 复 选 框 ， 当 用 户 单 击 该 复 选 框 时 ,脚本 就 自动 复制 账单 地 址 为 收 货 地 址 ， 从 而 避免 顾客 


重 填 一 遍 。 这 个 复 选 框 使 用 了 复制 表单 文本 框 功能 。 这 不 仅 节省 了 顾客 的 时 间 ,， 也 减少 了 键入 错 
误 。 图 8-14 展 示 的 是 来 自 Best Buy 站 点 ( www.bestbuy.com ) 的 一 个 复制 功能 复 选 框 。 
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Important Note for 
international Customers. 
Address Line 2 (optional) Collage/Schoo! 
*City *State *ZIP Code(5 digit) 
(Select a State +) 
*Country Important Note for International Customers 
| USA $) 
| 


Please enter your billing phone number on file with your credit card company. 
*Phone ‘Other Phone 


(ives, my BILLING and SHIPPING addresses are the same 


Contact Information 
Your e-mail address is required so we can send you a confirmation of your order. Any 
i à PARAR AEE E ET hae eh 


li Done B4 là Ysiow 


复制 功能 复 选 杠 
图 8-14 Best Buy 站 点 上 一 个 复制 功能 复 选 框 的 例子 


下 面 的 脚本 展示 了 如 何 实现 复制 功能 复 选 框 , 你 可 以 把 它 用 于 任何 表单 , 不 一 定 非 要 像 下 面 
这 个 例子 一 样 用 于 账单 7 收 货 地 址 表单 。 图 8-15 展 示 的 是 该 脚本 的 工作 情况 。 

(1) 首先 创建 两 组 地 址 输入 框 。 第 一 组 用 于 输入 账单 地 址 ， 第 二 组 用 于 输入 收 货 地 址 。 在 这 
两 组 文本 框 之 前 添加 一 个 复 选 框 ， 它 负责 控制 复制 账单 地 址 到 收 货 地 址 这 一 功能 。 


<label>Copy Fields</label> 
<input type="checkbox" id="copy-fields"/> 


<div id="billing-address"> 

<h2>Billing Address</h2> 

<label>First Name</label> 

<input type="text" id="b-first-name"/> 


<label>Last Name</label> 
<input type="text" id="b-last-name"/> 
</div> 


<div id="shipping-address"> 
<h2>Shipping Address</h2> 
<label>First Name</label> 
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<input type="text" id="s-first-name"/> 


<label>First Name</label> 
<input type="text" id="s-last-name"/> 
</div> 


复制 功能 复 选 


IHI 


@ Firefox File Edit View History Bookmarks Too Window Help =a m 3 4» (Œ Charged) Sat 12:17PM Q 
eoe jQuery Form validation = 
(<)>) - (ex) b (会) GD j ( http://smashingjquery.com/code/chapOB/form-copyfields.tm! WY) wr) a if Google QQ) Google aes 
(© Disable * Æ Cookies ~ | CSS» - | Forms - 2 Images - (.) Information - Miscellaneous * _/ Outline  .; Resize - > Tools - |.| View Source  _ Options | 


m 
Copy Fields 


Billing Address 


First Name Jake Last Name Rutter 


Shipping Address 


First Name Jake LastName Rutter 


P a Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow 人 oeo 
R Edit body < html Stylev Computed Layout DOM 
V <html> 
> <head> 
EZA 
<input id="copy-fields" type="checkbox"> 
V <div class-"billing-address"» 
«label» Copy Fields </label> 
«h2» Billing Address </h2> 
<label>First Name </label> 
«input id-"b-first-name" type-"text"» 
«label» Last Name «/label» 
<input id-"b-last-name" type-"text"» 
</div> 
V <div class-"shipping-address"» 
«h2» Shipping Address </h2> 
<label> First Name </Label> 
«input id-"s-first-name" type="text"> 
<label>First Name «/label- 


This element has no style rules. 


as 


图 8-15 ”工作 中 的 复制 功能 复 选 
(2) 选取 #copy-fields 元 素 并 为 它 绑 定 click 事 件 处理 函 数 。 


$('#copy-fields').bind('click', function(){ 
1); 


(3) 为 数据 复制 源 建立 两 个 新 变量 ， 分 别 保存 账单 地 址 中 两 个 文本 框 的 值 : 


$('#copy-fields').bind('click', function()( 
var billFName = $('#b-first-name').val(); 
var billLName = $('#b-last-name').val(); 


1); 


(4) 在 click 事 件 处 理 函数 做 任何 动作 之 前 ， 先 使 用 if else 语 句 判断 复制 功能 复 选 框 是 否 被 
选中 : 


TH 
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Var billFName $('#b-first-name').val(); 
var billLName $('#b-last-name').val(); 
if (this.checked) { 
} else { 
js 

1); 


(5) 如 果 复 选 框 为 选中 状态 ， 将 账单 地 址 中 相应 字段 的 值 复制 到 收 货 地址 对 应 的 字段 : 


$('#copy-fields') .bind('click', function() { 


$('#copy-fields') .bind('click', function() { 


var billFName $('#b-first-name').val(); 
var billLName $('#b-last-name').val(); 


if (this.checked) { 
$('ts-first-name').val(billFName); 
$('#s-last-name').val(billLName) ; 

} else { 

yi 


1): 


(6) 我 们 还 需要 在 else 子 句 中 设置 一 个 备用 选项 ， 当 用 户 取消 选中 复制 功能 复 选 框 时 清除 收 
货 地 址 的 内 容 : 


S$('#copy-fields') .bind('click', function() { 


var billFName $('#b-first-name').val(); 

var billLName $('#b-last-name').val(); 

if (this.checked) { 
$('#s-first-name').val(billFName) ; 
$('#s-last-name') .val(billLName) ; 

} else { 
$('.shipping-address input').val(''); 

) 

1); 


8.11 利用 插件 增强 表单 功能 


整合 第 三 方 开 源 插件 到 你 的 站 点 或 应 用 程序 , 能 有 效 提 高 开发 速度 并 提供 更 好 的 表单 验证 功 
能 ， 和 更 友好 的 人 机 交互 。 由 于 jQuery 有 着 海量 粉丝 和 支持 者 构成 的 巨大 的 开发 者 社区 ，jQuery 
拥有 数 不 清 的 支持 各 种 功能 的 插件 ， 包 括 设 定 默认 文本 的 插件 、 验 证 表单 任意 字段 的 插件 等 。 

在 开发 时 我 经 常 使 用 插件 , 通常 是 因为 时 间 紧 迫 无 法 自己 开发 某 个 功能 。 绝 大 多 数 情 况 ， 如 
果 能 找到 某 个 人 已 经 写 好 的 搬 件 ,我 就 不 必 自 己 写 了 。 在 本 节 中 , 我 将 介绍 两 个 我 经 常 使 用 的 表 
单 插件 一 一 qTip 和 Validate。 


8.11.1 为 网 站 整合 qTip 插 件 


qTip 是 一 个 jQuery 插件 ， 我 们 可 通过 它 轻松 地 为 任意 元 素 设置 高 级 提示 信息 。 这 些 提 示 信 息 
可 以 是 静态 内 容 ， 也 可 以 是 动态 内 容 。qTip 支 持 许多 功能 ， 比 如 多 浏览 右 文 持 CIE / 


( 
( 
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Firefox/Safari/Opera/Chrome )， 这 些 功能 使 它 成 为 了 一 个 魅力 四 射 的 轻 量 级 插件 。 对 于 那些 无 法 
完美 支持 的 浏览 器 , 提示 信息 窗 会 自动 优雅 降级 。qTip 可 用 于 页 面 的 任意 元 素 , 包括 段落 标签 (如 


图 8-16 所 示 )。 


用 qTip 创 建 的 一 个 提示 信息 


&& Firefo e Edit View History Bookmarks [Tools Window Help 2 P Get (Charged) Sat 12:18 PM_Q _ 


eoo qTip - The 


jOliety tooltip pligin= Demos: Title attibüre O 


(a) ALCI] J4 http: //craigsworks.com/prpjects /qtip/demos/content/default wr © Google Qa) "| 


5 Di s s Fo ages * Q) lpformation * Miscellaneous * _ Out esize v Tools * , | View Source + 


Demo Title attribute 


Q-Tip (rapper) 


Jonathan Davis (born April 10, 1970), better known by 


artist, singer, and occasional actor from Queens, New York City, perhaps best known as part of the 


critically acclaimed group A Tribe Called Quest. 
Personal Life 


Q-Tip was born in Harlem, New York. He attended Murry Bergtraum High School in Manhattan, New 
York. He converted to Islam in the mid-1990s, and chan: 
Q in Q-Tip's stage name stands for Queens, the borough |of New York City from which he hails. On 


Martha Stewart he said his name Qjp was his childhood nickname because he was skinny and had 
big hair. ITI 


Career 


View the code 


his stage name Q-Tip, is an American hip hop 


his name to Kamaal Ibn John Fareed. The 


A Tribe Called Quest disbanded in 1998, after which Q-Tip pursued a solo career. His first solo singles, 
"Vivrant Thing" and "Breathe & Stop", were far more pop-oriented than anything he had done in A Tribe 
Called Quest, as was his solo debut LP for Arista Records, Amplified. His 2002 follow-up, Kamaal the 
Abstract, although critically acclaimed and issued a catalog number, was never relessed because the 


label believed that it did not have commercial appeal. 
As of late, Q-Tip has been very active, once again hap) 


Rock the Bells Tour '08, and regaining control of his previously label-owned MySpace page. He has announced that he is negotiating for the 


pily reunited with the full line-up of A Tribe Called Quest on the 2K7 NBA Bounce Tour, 


ownership of the masters of earlier material from his previous labels and plans to release them independently. 


Source: Wikipedia 
Image: Joe Cereghino 


Ln, http://craigsworks.com/projects/qtip/demos/content/default# 


由 CraigWorks.com 许 可 复制 


图 8-16 ”在 qTip 站 点 上 ， 一 个 段落 使 用 qTip 显 示 提 示 信 息 
我 喜欢 结合 表单 使 用 提示 信息 ， 提 醒 用 户 应 该 键入 什么 内 容 。 就 像 我 在 第 5 章 中 介绍 过 的 那 
样 ， 我 们 能 够 非常 容易 地 从 零 开 始 ， 为 某 个 元 素 创 建 基本 提示 信息 。 然 而 qTip 拥 有 完整 的 API， 
它 支持 改变 提示 信息 的 样式 (以便 与 我 们 的 站 点 风格 保持 一 致 )、 出 现 位 置 、 动 画 效果 ， 还 有 添 


加 动态 内 容 。 


使 用 qTip 的 最 大 好 处 是 它 支 持 非常 多 的 配置 选项 。 另 外 ,， 它 的 文档 也 是 一 流 的 。 这 就 是 我 一 


直 用 它 的 原因 。 有 些 插件 文档 极其 精 煌 


和 ， 也 缺少 必要 的 支持 ， 这 使 得 它们 难以 使 用 。 偶 尔 遇 到 文 


档 很 差 的 插件 ， 我 通常 都 会 自己 再 写 一 个 类 似 的 。 
表 8-2 概 要 的 描述 了 jQuery qTip 插 件 的 一 些 选项 。 
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表 8-2 qTip 插件 选项 


选 项 名 描 OK 

content 指定 提示 信息 的 内 容 

position 指定 提示 信息 在 DOM 中 的 显示 位 置 
show 指定 显示 提示 信息 的 特效 

hide 指定 隐藏 提示 信息 的 特效 

style 指定 提示 信息 的 样式 

api 指定 回调 函数 


ik: 要 查看 qTip 的 完整 选项 列表 ， 请 访问 http://craigsworks.com/projects/qtip/docs/reference/。 


8.11.2 ”利用 qTip 使 用 title 属 性 创建 表单 元 素 的 基本 提示 信息 


AST, 我 将 演示 如 何在 站 点 中 整合 qTip 插 件 并 为 一 个 表单 元 素 设置 提示 信息 。 这 个 提示 信息 
间 导 用 户 在 当前 项 应 该 填写 的 内 容 。 我 们 将 使 用 Fitle 属 性 存放 需要 显示 的 文本 。 使 用 Fitle 属 
性 的 好 处 是 , 在 用 户 禁 用 JavaScript 的 情况 下 , 把 鼠标 放 到 输入 框 上 时 , 尽管 显示 的 没有 那么 美观 ， 
仍然 可 以 看 到 提示 信息 。 

(D 准备 一 个 文本 框 ， 并 把 它 的 ID 设置 为 email: 

<input type="text" id="email" /> 

(2) 使 用 jQuery 插件 时 ， 我 们 总 是 要 在 页 头 把 这 个 插件 包含 到 页 面 中 。 它 的 包含 位 置 应 该 总 
是 刚好 位 于 jQuery 库 之 后 ， 且 位 于 你 自己 编写 的 任何 引用 该 插件 的 jQuery 代码 之 前 。 

<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script> 

(3) 为 这 个 输入 框 添加 一 个 title 属 性 。title 属 性 包含 的 文本 将 用 作 提 示 信 息 。 

<input type="text" id="email" title="Please enter your email address."/> 

(4) 选中 所 有 拥有 title 属 性 的 input 元 素 ， 调 用 .atip() 方 法 。 如 果 调 用 .atip () 方 法 时 未 
提供 任何 选项 ，.Stip() 将 使 用 默认 设置 。 

$('input[title]').qtip({}); 

(5) 通过 传递 选项 参数 给 .atip () 方 法 , 我 们 可 自 定义 qTip。 在 下 面 的 代码 中 我 为 图 8-17 所 示 
的 例子 使 用 了 以 下 选项 : 


$('input[title]') .qtip({ 
style: { color: 'black', name: 'blue', tip: true }, 
position: { corner: { target: 'bottomMiddle' }}, 
show: ( when: { event: 'focus' }}, 
hide: { when: { event: 'blur' }} 

ys 
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dow Help — £3 

jQuery qTip 

AA f ma | http://smashingjquery.com/code/chap08/form-qtip.htm! 
CSS + | Forms + 2 Images + Ç) Information * Miscellaneous * _/ O 


dit story Bookmarks Tool 


| Please enter your email address. 
# E Console HTML» CSS Script DOM Net Page Speed Page Speed Activity YSlow ( KIAJ 
k$ : Edit body - html Style» Computed Layout DOM 


This element has no style rules. 


style-"-moz-border-radius: Opt Opt Opt 
x Opx; width: 230px; display: block; 
ip="0"> 


图 8-17 ”使 用 qTip 显 示 表 单 提示 信息 


8.11.3 ”使 用 jQuery Validate 插 件 验证 表单 


jQuery Validate 插 件 自 2006 年 7 月 问世 以 来 ， 已 成 为 至 今 可 用 的 最 古老 且 支持 最 好 的 验证 搬 
件 。 它 支持 许 许 多 多 的 选项 ， 用 于 设置 Web 站 点 或 应 用 程序 中 的 表单 验证 ， 这 些 我 在 本 章 中 已 经 
讨论 过 。 如 果 你 只 需要 简单 的 表单 验证 ， 比 如 验证 少数 几 个 文本 框 ， 我 建议 你 使 用 jQuery 编写 自 
己 的 脚本 来 解决 问题 。 

Validate 持 件 是 相当 健壮 的 解决 方案 ， 它 内 建 了 标准 的 正则 表达 式 来 验证 电话 号 码 、 电 子 邮 
件 地 址 、 日 期 和 信用 卡号 码 等 。 它 通过 许多 事件 (submit, kevpressfllfocus) 把 出 错 信息 
和 提示 信息 直接 存放 在 DOM 中 。Validate 插 件 支 持 很 广泛 的 API， 支 持 对 数据 验证 方法 的 完全 定 
制 。 我 们 也 可 以 选择 “ 开 箱 即 用 ”( 内 建 的 ) 的 (验证 ) 方法 。 

对 那些 需要 姓 、 名 、 地 址 、 城 市 、 州 、 邮 政 编 码 及 唯一 用 户 名 和 【至少 $ 位 字符 长 且 混 用 大 
小 写字 母 的 ) 密码 的 注册 表单 来 说 ，Validate 插 件 再 合适 不 过 了 。 一 个 长 长 的 表单 ， 不 同 的 输入 
框 需要 不 同 的 规则 ， 而 我 们 希望 全 程 帮助 用 户 完成 这 个 表单 。 

图 8-18 演 示 的 是 一 个 使 用 了 Validate 插 件 的 表单 。 如 果 用 户 单 击 了 Submit 按 钮 而 没有 正确 填写 
所 有 的 必 填 项 ， 每 个 必 填 项 之 后 都 会 出 现 提 示 文 本 ， 指 出 这 些 项 是 必 填 的 。 
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Welcome to KlSSmetrics 


(4 > CS) CX) Cft) Cllfiudssmetdesigomy. hitps://www.kissmetrics.com/signup wv) QM coogi a) fer 
@ Disable + Æ Cookies + i] CSS + E] Forms + | Images * @ Information + Miscellaneous * ./ Outline * Š$ Resize * J^ Tools + {2) View Source * «> Options 
lp Welcome to KISSmetrics E Te 


@KISSmetrics (tome ED ED ED UC 


Try KISSmetrics with a Free 30 Day Trial 


Choose your plan later. Cancel at any time. 


Start Your Free Trial Now 


Enter your information below 


Need help signing up? 
If you have any questions please email us at 
support@kissmetrics.com or call us at (888) 


Ô Name cannot be blank. 767-5477 


& E-mail does not appear to be a valid e-mail address 


& New password cannot be blank 


KissMetrics.com 许 可 复制 


图 8-18 一 个 使 用 了 Validate 插 件 的 表单 


8.11.4 为 联系 人 表单 添加 简单 验证 


使 用 Validate 插 件 ， 我 们 可 以 节省 下 大 量 的 时 间 ， 因 为 不 必 为 每 个 输入 框 编写 验证 脚本 。 在 
下 面 的 解决 方案 中 ， 我 演示 了 如 何 只 使 用 一 行 jQuery 代 码 和 对 表单 的 小 小 调整 就 使 用 上 Validate ag 
插件 提供 的 默认 验证 方法 。 

(D) 准备 联系 人 表单 ， 其 中 包含 姓名 、 电 子 邮 件 地 址 、 电 话 号 码 、 信 息 栏 和 提交 按钮 。 


<form id="contact-form"> 
<ul> 
<li><label>Name</label> 
<input type="text" id="name" name="name"/> 
</li> 
<li><label>Email</label> 
<input type="text" id="email" name="email"/> 
</li> 
<li><label>Phone</label> 
<input type="text" id="phone" name="phone"/> 
</> 
<li><label>Message</label> 
<textarea name="message" id="message"></textarea> 
</li> 
<li><input type-"submit"/»«/li» 
</ul> 
</form> 
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(2) 当 使 用 jQuery 搬 件 时 ， 我 们 总 要 先 把 捅 件 包 含 到 页 头 。 它 的 包含 位 置 应 该 总 是 刚好 位 于 
jQuery 库 之 后 ， 并 且 位 于 你 自己 编写 的 任何 引用 该 插件 的 jQuery 代码 之 前 。 


<script src="js/jquery.validate.min.js" 


type="text/javascript"></script> 


(3) 在 document 的 ready 事 件 处 理 函 数 中 , 选中 #contact-form 元 素 并 调用 .validate () 
Ts 


$(document).(function() { 
$("#contact-form") .validate(); 


1); 


就 这 么 简单 ! 验证 插件 现在 已 经 应 用 于 你 的 Web 站 点 。 然 而 ， 如 果 在 Firefox 浏 览 器 中 访问 这 


个 页 面 并 单 击 Submit 按 钮 ， 你 不 会 发 现任 何 验证 行为 ( 见 图 8-19 )， 这 是 因为 我 们 还 没有 配置 这 
个 插件 。 


@ Firefox File Edit View History Bookmarks Tools Window Help ža ™ © 会 4» (Œ (Charged) Sat 12:23 PM .Q 
eoo jQuery Validate 

4 http: //smashingjquery.com/code/chap08/form-validate.htmI?name=&email=< ZY Y 
3) Disable Cookies CSS + | Forms * # Images ”四 Information * Miscellaneous Outline Resize * ~ Tools * |. | View Source 
[] alidate E 


= 


Console HTMLy CSS Script DOM Net Page Speed Page Speed Activity — YSlow jeeo 
ÈS i Edit © body < html Style» Computed Layout DOM 
Y <html> 


ly form-v..essage= (line 5) 
font-family: georgia; 


图 8-19 ”提交 表单 未 能 触发 任何 验证 行为 


我 们 可 以 相当 容易 地 使 用 class 为 表单 添加 验证 行为 。 这 是 最 快 也 最 容易 的 方法 ， 不 过 我 们 
还 不 能 控制 提示 信息 或 者 其 他 像 文 本 框 最 少 需 要 5 个 字符 、 最 多 不 超过 10 个 字符 之 类 的 高 级 规则 。 
那 都 是 些 非 常 棒 的 “ 开 箱 即 用 ”功能 。 我 会 在 下 一 个 教程 中 详细 介绍 这 些 高 级 选项 。 

O 添加 class="required" 给 那些 必须 填写 的 项 。 

口 添加 class="email" 给 电子 邮件 地 址 输入 框 。 

O 添加 class="digits" 给 那些 只 允许 输入 数字 的 文本 框 。 
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(4) 调整 表单 代码 ， 为 表单 域 添 加 验证 class: 


<form id="contact-form"> 
<ul> 

<li><label>Name</label> 
<input type="text" id="name" 
</li> 
<li><label>Email</label> 
<input type="text" id="email" 
</li> 
<li><label>Phone</label> 
<input type="text" id="phone" 
«fi 
<li><label>Message</label> 


<textarea name="message" id="message" 

</li> 

<li><input type-"submit"/»«/li» 
</ul> 


</form> 


name="name" 


name="email" 


name="phone" 


class="required"/> 


class="required email"/> 


class="required digits"/> 


class="required"></textarea> 


给 这 些 input 元 素 添 加 完 这 些 required / email / digit 类 之 后 ， 提 交 表 单 ， 就 会 看 到 如 图 
8-20 所 示 的 提示 出 错 的 验证 信息 。 如 果 你 开始 填写 一 个 电子 邮件 地 址 ， 提示 信息 就 由 “ This field 


is required”( 该 项 必须 填写 ) 变更 为 “Please enter a valid email address” (i 


一 个 合法 的 电子 邮件 地 址 )。 信 息 随 着 你 的 键入 而 变 ， 
也 就 不 再 显示 提示 信息 。 


This field is required. 
Phone 
This field is required. 
Message 

m 


This field is required. 
FR 
kb | Edit 


V <html> 
P <head> 


Boone ——gns 
<form id-"contact-form"» 


Y ub 
Y <li> 
«label» Name </Label> 
<input id-"name" class="required error" type="text" name="name"> 
«label class-"error" for-"name" generated="true">This field is 
required. «/label» 
<i> 
Vai 
«label» Email </label> 


Console HTML v 
body < html 


CSS Script DOM Net PageSpeed Page Speed Activity YSlow. 


青 输入 
一 旦 你 键入 了 正确 的 电子 邮件 地 址 ， 表 单 


Style | Computed Layout DOM 


body { 
font-family: georgia; 
font-size: 12px; 


H 


form-v..te.html (line 5) 


图 8-20 ”使 用 Validate 插 件 之 后 提交 表单 ， 


错误 信 息 随 即 显 示 在 表单 上 


188 第 8 章 使 用 jQuery 制作 高 级 表单 


参考 表 8-3 查 阅 Validate 插 件 完 整 的 选项 列表 。 


#8-3 Validate 插 件 选 项 


选 项 名 描 述 
required 必须 填写 一 个 值 
minlength 要 求 的 最 小 长 度 
maxlength 要 求 的 最 大 长 度 
email 要 求 是 一 个 合法 的 电子 邮件 地 址 
url 要 求 是 一 个 合法 的 URL 
date 要 求 是 一 个 合法 的 日 期 
number 要 求 是 一 个 合法 的 十 进 制 数 
digits 要 求 是 合法 的 数字 
creditcard 要 求 是 合法 的 信用 卡号 码 
accept 要 求 某 种 文件 扩展 名 
equalTo 要 求 两 个 元 素 的 值 相等 ， 经 常用 于 密码 和 确认 密码 


ib. 要 查阅 完整 的 文档 ， 请 访问 http://docs.jquery.com/Plugins/Validation。 


下 面 列 出 了 设置 这 些 选 项 的 两 种 方法 。 

口 第 一 种 ,使 用 类 在 表单 中 般 入 这 些 选 

<input type="text" id="email" name="email" class="required email"/> 
OD 第 二 种 ， 以 JSON 对 象 的 形式 传递 选项 给 .valiaate() : 


rules: { 
email : { 
required: true 
} 
} 


8.11.5 在 联系 人 表单 中 使 用 高 级 验证 规则 并 自 定 义 提 示 信 息 


Validate 插 件 支持 可 用 于 任意 表单 的 许多 极其 灵活 的 选项 ， 以 确保 所 有 的 数据 都 被 检查 ， 并 
且 在 用 户 键入 的 信息 不 正确 时 及 时 提醒 。 本 节 , 我 们 接着 使 用 上 一 个 例子 中 的 表单 代码 ， 展 示 如 
何 使 用 Validate API 的 高 级 选项 来 验证 表单 项 并 显示 自 定义 提示 信息 (参见 图 8-21 )。 

(1) 为 使 用 Validate 插 件 生成 的 表单 及 错误 信息 设置 样式 。 


body{font-family:georgia; font-size:12px} 

label{display:block} 

ul{list-style-type:none} 

ul li{margin:15px 0} 

.error, .notice, .success{padding:.8em; margin-bottom:1em; border:2px solid #ddd} 
.error{background: #FBE3E4; color:#8alf11; border-color: #FBC2C4} 
-notice{background: #FFF6BF; color:#514721; border-color: #FFD324} 

. success {background: #E6EFC2; color:#264409; border-color: #C6D880 } 
#contact-form{width: 400px} 
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ri js Windo\ H ER m = I | Q 
eoo jQuery Validate. c 
(a CS) Cos) Gt) CL ne: /smashingjquery.com/code/chap08/form-validate-advanced.ntm! — Y Y J Ax Coe Q erede 
3 E = H i [3 j t E] 
B alida 
| Your form contains 3 errors, see details below. 
Name 
I 
| Nameis required. 
Email 
j | 
| 
| Email igrpquired. 
Phone ~ 
d " 
| | 
+ a Console HTML» | CSS Script DOM Net Page Speed Page Speed Activity YSlow Á )eeo 
好 | Edit © body < html Style» Computed Layout DOM 
V <html> body { form-v...ed.html (line 5) 
> <head> font-family: georgia; 
D | ó€ÀÍáóÀ 
<form id="contact-form"> } 
«div id="sumary" class-"error"» Your form contains 3 errors, see details 
below. </div> 
Y ul> 
Y di> 
<label> Name </label> 
<input id-"name" type="text" name="name" class="error"> 
<label class="error" for="name" generated="true">Name is 
required. </label> Irt 
UE $ 
ms 


图 8-21 具有 高 级 规则 和 自 定义 信息 的 表单 提交 之 后 的 显示 情况 
(2) 准备 包含 姓名 、 电 子 邮 件 地 址 、 电 话 号 码 、 信 息 栏 和 提交 按钮 的 联系 人 表单 : 


<form id="contact-form"> 
<ul> 
<li><label>Name</label> 
<input type="text" id="name" name="name"/> 
</li> 
<li><label>Email</label> 
<input type="text" id="email" name="email"/> 
«lie 
<li><label>Phone</label> 
<input type="text" id="phone" name="phone"/> 
</li> 
<li><label>Message</label> 
<textarea name="message" id="message"></textarea> 
</li> 
<li><input type-"submit"/»«/li» 
</ul> 
</form> 


(3) 当 使 用 jQuery 插件 时 ， 我 们 总 要 先 把 捅 件 包 含 到 页 头 。 它 的 包含 位 置 应 该 总 是 刚好 位 于 
jQuery 库 之 后 ， 并 且 位 于 你 自己 编写 的 任何 引用 该 插件 的 jQuery 代码 之 前 。 
<script src="js/jquery.validate.min.js" type="text/javascript"></script> 


(4) 选中 #contact-form 元 素 并 调用 .validate() 方 法 。 


$s("#contact-form") .validate(); 
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(5) 首先 为 需要 验证 的 表单 元 素 设置 高 级 规则 。 这 些 规则 以 JSON 对 象 的 形式 传递 
给 .validate() 方 法 。 我 们 使 用 这 些 input 元 素 的 name 属 性 引用 这 些 元 素 。 姓 名 、 电 子 邮件 地 址 
和 电话 号 码 是 必须 的 。 电 子 邮 件 地 址 必须 被 验证 为 真实 地 址 。 


$("#contact-form") .validate({ 


rules: { 
name: "required", 
email: { 


required: true, 
email: true 
} 
phone: "required" 
} 

1); 

(6) 接 下 来 ， 设 置 我 们 希望 显示 的 自 定 义 信息 。 我 们 想 设置 几 个 就 设置 几 个 。 如 果 我 们 不 设 
置 自 定义 的 错误 信息 ， 就 会 使 用 默认 信息 “This field is required”。 使 用 和 规则 相同 的 格 
式 ， 我 们 设置 messages 分 支 。 在 大 括号 中 ， 添 加 每 条 信息 时 使 用 name 属 性 加 一 个 冒号 ， 后 面 跟 
着 希望 使 用 的 信息 字符 捉 。 


$("#contact-form") .validate({ 


rules: { 
name: "required", 
email: { 


required: true, 
email: true 
} 
phone: "required" 
} 
messages: { 
name: "Name is required.", 
email: "Email is required.", 
phone: "Phone is required." 
} 
1); 


瞧见 没 ? 在 Firefox 中 载 入 这 个 页 面 , 然后 提交 表单 ， 所 有 表单 项 都 被 验证 并 且 显 示 你 刚刚 创 
建 的 自 定义 提示 信息 。 就 这 么 简单 。 使 用 Validate 插 件 的 好 处 在 于 它 运 行 在 客户 端 ， 因 此 没 必要 
刷新 页 面 。 在 激活 出 错 信 息 之 后 ， 如 果 你 重新 键入 数据 ,插件 脚本 会 实时 验证 你 键入 的 数据 。 这 
为 这 款 迷 人 的 插件 又 加 一 分 ! 

如 果 肯 花 些 时 间 把 玩 这 款 插件 , 你 还 能 得 到 更 好 的 结果 。 如果 你 在 使 用 这 款 捕 件 时 遇 到 任何 
问题 ,可 阅读 它 的 文档 或 者 通过 谷歌 查找 答案 。 很 可 能 有 人 已 经 遇 到 过 类 似 问 题 ， 更 何况 这 款 搬 
件 已 经 问世 长 达 5 年 并 且 仍然 有 着 良好 的 支持 。 
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Ajax 与 动态 数据 处 理 


jQuery 能 够 并 且 擅 长 维护 DOM。 你 或 许 不 知道 jQuery 还 有 许多 支持 Ajax 操作 的 方法 。 许 多 人 
搞 不 清 Ajax 是 怎么 回 事 。 随 着 Web 2.0 的 兴起 Ajax 这 个 术语 越 来 越 流行 。Web 设 计 师 、 开 发 者 和 市 
场 营 销 人 员 都 声称 会 用 Ajax， 然 而 Ajax 到 底 什 么 意思 ? Ajax 意味 着 我 们 能 够 设计 、 开 发 和 运营 文 
持 幕 后 往返 传递 数据 的 Web 站 点 和 应 用 程序 ， 让 我 们 能 够 为 顾客 提供 更 加 丰富 的 用 户 体 验 。 

本 章 ， 我 将 介绍 如 何 使 用 jQuery 通过 Ajax 请 求 服务 器 端 数据 。 我 将 使 用 前 面 章节 编写 的 代码 
示例 ,演示 如 何 添加 动态 内 容 ， 以 生成 自 更 新 的 组 件 。 我 不 会 讲述 如 何 设置 服务 器 端 组 件 ， 因 为 
需要 像 PHP 或 ASP.net 那 样 的 后 端 编 程 语言 知识 ， 而 这 超出 了 本 书 的 范围 。 我 会 演示 如 何 与 几 个 
流行 的 第 三 方 服务 API 交 互 ， 以 便 使 用 jQuery 通过 这 些 API 获 取 远 端 数 据 ， 并 把 这 些 数据 呈现 在 
站 点 上 。 


9.1 Ajax 揭秘 


Ajax 代表 异步 JavaScript 与 XML。 还 有 一 个 较 少 人 知道 的 术语 XHR ， 表 示 XML HTTP 请 求 。 
如 果 是 一 个 Firebug ( Firefox 插 件 ) 老手 ， 那 你 很 可 能 已 经 通过 Firebug 的 XHR 标 签 看 到 过 Ajax 请 
求 。 如 图 9-1 所 示 ，XHR 是 Ajax 请 求 的 一 种 。 

Ajax 是 指 在 不 需要 刷新 〈 重新 加 载 ) 页 面 的 情况 下 ， 人 允许 客户 端 应 用 程序 传递 数据 给 服务 器 
并 从 服务 器 端 获取 数据 的 一 组 模式 和 技术 。 表 面 上 看 来 ，Ajax 在 幕后 创建 了 一 种 平滑 的 数据 流 ， 
这 也 是 它 名 字 中 含有 一 个 A ( 表示 “异步 ”) 的 原因 。 它 以 异步 的 方式 和 服务 器 对 话 ( 交换 数据 )。 
Ajax 请 求 以 POST 或 GET 请 求 的 方式 完成 。 

有 些 时 候 ，Ajax 请 求 也 能 够 以 同步 方式 执行 。 例 如 ， 有 时 我 们 需要 载 人 一 个 外 部 配置 文件 ， 
在 确定 配置 文件 成 功 载 人 之 前 ， 我 们 不 希望 执行 后 面 的 脚本 。 不 过 ， 本 章 我 们 只 关心 异步 请 求 。 

Facebook 站 点 大 量 地 使 用 了 Ajax 技 术 。 在 Facebook 上 登录 后 ， 你 通常 会 看 到 朋友 们 的 最 新 状 
态 和 最 近 的 活动 。 左 边 是 一 个 在 线 朋友 列表 , 这 是 通过 向 服务 器 发 起 Ajax 请 求 不 断 检查 你 的 朋友 
中 谁 在 线 上 实现 的 。 或 许 你 的 一 位 朋友 注意 到 你 在 线 , 于 是 启动 了 一 个 聊天 会 话 一 一 这 又 是 一 个 
Ajax 请 求 。 当 你 和 朋友 聊天 时 ， 男 两 位 朋友 更 新 了 他 们 的 状态 ,于 是 一 条 新 消息 出 现在 你 的 新 鲜 
事 顶 部 , 提醒 你 有 了 新 消息 。 所 有 这 些 事 件 都 是 通过 Ajax 请 求 完 成 的 ， 你 一 次 都 不 用 刷新 或 者 重 
新 载 和 页面 。 这 实在 太 棒 了 ! 
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000 Facebook (30) (=) 
(D-O CO) Gf) CI hup: vw facebook. com/home.php?£t/!ref-logo WY) QRH Googie a) 
@ Disable + & Cookies + |] CSS + ©] Forms + Œ| Images + @ Information + C Miscellaneous * 4% Outline * 7; Resize + g” Tools * {2) View Source * 4» Options 
aaa $a SE 
30 
facebook Home Profile Account + 
Jake Rutter EJ News Feed Top News - Most Recent [zoc — — 
q “Edit Mv Profile S _ zi IE I 
# k Console HTML CSS Script DOM | Netv  PageSpeed Page Speed Activity YSlow ( )eeo 
M : Clear Persist ; All HTML CSS JS CT Images Flash 
=. za = = |_ Statu d man | Fimaiin - - 
P GETp 805620017-0 200 OK 0.53.channel.facebook.com 1118 1174s 
> POST buddy listphp? ; 200 OK facebook.com 8188 cm 
> GET history.php?_a=18 200 OK facebook.com 3088 [jij ?ms 
> POST settings.php?_ 200 OK facebook.com 1568 E 148ms 
CT 和 5630017=2 — -2000K OS3.channel facebook.com 1118 A 222: 
> POST settings.php?_a= 2000K facebook.com 1128 E 164ms 
I> GET R.000020017=2 200 OK 0.53.channel facebook.com 700 — MEME «o: 
> GETinboxphp? a-1&s 200 OK facebook.com 5.6 KB NE, 133ms 
GET p_805620017=3 0.53.channel.facebook.com TOW 
8 requests E I - 73K8 —— 18.565 (o! 
[uz Done A Mac 44LIK 4.1485 


图 9-1 Firebug 插 件 展示 的 Facebook 站 点 中 的 XHR 请 求 


Gmail 整合 了 很 多 Ajax 功能 ， 比 如 内 建 的 实时 聊天 客户 端 、 通 过 Gmail 账号 打 电 话 的 功能 、 
动 信 件 的 拖 放 功 能 , 还 有 自动 完成 收 信人 账号 等 功能 。Gmail 是 又 一 个 把 Ajax 用 到 极致 的 产品 


见 图 9-2 )。 


000 Gmail - Inbox (3207) - jake.rutter@gmail.com B 


@»- QU) CX) te) 全 htps://mail.google.com/mail?shva- 14inbox Bi v) (GM Goose Q) ei 


( Disable + & Cookies + LI CSS + ©] Forms + 3 Images + @ Information + © Miscellaneous + 7 Outline + 5; Resize + g Tools + {2) View Source + {> Options 
IV] Gmail - Inbox (3207) - jake-rutter. =| 


"UE 5 N 
Gmail Calendar Web Documents Reader more v Beninas | Settings | Help | Sign out 图 


Cnal serenan eene ER 


Console HTML CSS Script DOM Netv Page Speed Page Speed Activity YSlow 


Ai ' Clear Persist : All HTML CSS JS CT images Flash 


P POST mail?ui=2&ik=66 200 OK mail.google.com 4i EN 236ms [s 
P POST mail7ui=28ik=66 — 200 OK mail.google.com 25.7 KB 
P POST mail?ui=2&ik=66 200 OK mail.google.com 3128 
> GET mail?ui=2&view=js 200 OK mail.google.com 112.2 KB 
P POST mailui=2&ik=66 200 OK mail.google.com 30.8 KB 
P GETtestVER-B&at-AF — 200 OK mail.google.com 208 
> GET mail?ui=2&view=js 200 OK mail.google.com 65.1 KB 
P POST mail?ui=2&ik=66 200 OK mail.google.com 2.6 KB 
P POST mail?ui=2&ik=66, 200 OK mail.google.com 3118 
> GET uploaderapi2.swf 200 OK mail.google.com 3.8 KB 
> GET mail?ui=2&view=js 200 OK mail.google.com 32.5 KB 
P POST mailui=2&ik=66 200 OK mail.google.com 37.4 KB 
P GETtestVER-B&at-AF — 200 OK mail.google.com 68 
> GET mail?ui-2&view-js — 200 OK mail.google.com 2088 
> GET mail?ui-2&view-js — 200 OK mail.google.com 8888 
> POST mail?ui=2&ik=66, 200 OK mail.google.com 30.6 KB 
> GET mail?ui-2&view-js 200 OK mail.google.com 8.6 KB 
> GET mail?ui=2&view=js — 200 OK mail.google.com 3KB 
> GET mail?ui-2&view-js — 200 OK mail.google.com 28.7 KB 
b POST mail?ui=2&ik=66 — 200 OK mail.google.com 23.3 KB 
> POSTbind?VER-B&at-) — 200 OK mail.google.com 2178 
> GETbind?VER-8&at-Al 200 OK mail.google.com ? (235 KB) 
> POSTbind?VER-B&at-) — 200 OK mail.google.com 


> GET mail?ui-2&ik-66c! — 200 OK mail.google.com 


© 2010, Google 


图 9-2 ”Firebug 呈 现 的 由 Gmail 发 起 的 XHR 请 求 
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92 ”在 页 面 上 动态 载 入 内 容 


我 们 可 以 使 用 jQuery 的 .loada() 方 法 ， 从 服务 器 上 载 入 存放 在 其 他 位 置 的 HTML 内 
容 。.1oad() 方 法 接受 内 容 所 在 的 URL 作 为 参数 ， 且 需要 以 相对 路 径 ”( 对 当前 页 面 来 说 ) 引用 
这 个 URL。.1oad() 方 法 只 能 从 存放 在 同一 个 服务 器 或 域 中 的 文件 中 载 人 数据 。 

如 果 希 望 载 和 其 他 域名 下 的 内 容 ， 我 们 需要 向 Web 服 务 、API 或 者 支持 JSON-P 的 Web 服 务 器 
发 起 JSON-P 请 求 ( 我 会 在 本 章 后 面 讲解 有 关 JSON-P 的 内 容 )。 

$ (selector) .load(URL) 

WR Ar BEE ASA s BU EE T AERE, Ed TRI We ER LT i] PBZ Load () WIE, BE 
可 以 是 一 个 匿名 函数 ， 也 可 以 是 一 个 具名 函数 。 


$(selector).load(URL, function() { 
alert ('The content was loaded') ; 


}) 
WRF (selector) 对 应 的 元 素 不 存在 ， 则 不 会 载 入 任何 内 容 。 


921 载 入 全 部 内 容 


如 果 和 希望 载 人 一 个 独立 HTML 文 件 的 全 部 内 容 , 我 们 需要 先 选 中 存放 内 容 的 目标 元 素 , 然后 
以 相对 路 径 表示 的 HTML 文 件 URL 为 参数 调用 .1oad() 方 法 。 

在 下 面 的 例子 中 ， 我 利用 一 些 由 H2 和 ?元 素 构成 的 示意 内 容 准备 了 一 个 HTML 页面。 我 还 有 
一 个 HTML 页 面 ， 其 中 有 一 个 空 的 aiv#content 元 素 ， 我 计划 为 它 载 和 人 内容。 我 使 用 . 1oad () 方 
法 将 内 容 “ 拖 ”入 #content 元 素 并 显示 在 页 面 上 (参见 图 9-3 )。 

(1) 创建 一 个 用 来 载 和 的 HTML 文 档 。 如 果 我 们 不 为 这 些 内 容 设 置 任何 CSS 样 式 , 它 就 会 继承 
父 页 面 的 样式 。 把 这 个 文件 保存 为 ajax-content.html。 


<!doctype html> 

<head> 
<title>jQuery Content</title> 
<style> 
body {font-family:georgia;font-size:12px;} 
</style> 

</head> 

<body> 

«hi»Dolor Neque Placerat Sem Lacus Senectus</h1> 


<h2>Posuere Eleifend Amet</h2> 

<p>Scelerisque. Vivamus at interdum aliquam turpis euismod adipiscing dolor nec fusce 
nulla amet facilisis fusce montes donec eniminteger habitant euismod dignissim sodales 
eu dui Lacus <em>potenti</em> gravida gravida. Amet cum. Accumsan hac.</p> 


<p>Ligula. Sodales, suscipit elementum. Faucibus tincidunt feugiat consectetuer cum 


(D 其 实 不 必 非 要 是 相对 路 径 ， 绝 对 路 径 也 可 以 。 
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accumsan platea mauris augue <strong>curae;</strong> semper risus. Dapibus Scelerisque. 
Ante proin leo. Dolor, arcu sociis mattis conubia nisi mi venenatis montes molestie 
mi, per. Fermentum enim iaculis magnis nonummy.</p> 


<p>Rutrum <em>tortor</em> aptent vestibulum aliquet. Sollicitudin, mattis cras ac 
accumsan bibendum pellentesque platea sociosqu parturient ad ligula. Sociis nisi mus 


venenatis maecenas vel quisque. Volutpat turpis praesent tempus nulla.</p> 
</body> 
</html> 


(2) 在 当前 页 面 中 添加 一 个 #content 元 素 。 它 用 来 存放 .1oad() 方 法 载 人 的 内 容 。 我 们 也 可 
以 把 内 容 载 人 到 某 个 具体 的 标签 中 ， 比 如 body 标 签 。 


<div id="content"></div> 


(3) 在 document 的 ready 事 件 处 理 函 数 中 添加 一 条 语句 ， 选 中 #content 元 素 ,， 然 后 调 
用 .1oad() 方 法 把 ajax-content.html 文 件 的 内 容 载 和 人 页面。 
$ (document) .ready (function() { 


$('#content').load('ajax-content.html'); 
yy 


jQuery Dynamic Content ES 


(8) *)- CGU (XX) (he) CL hitp://smashingjquery.com/code/chap09/ajax-dynamic-content.html WY) Gx Coogle Qa) i- 
~ 一 全 一 

@ Disable + Æ Cookies + LJ CSS + =] Forms + E Images + @ Information + C? Miscellaneous + ./ Outline + 22 Resize » gP Tools + f>) View Source ， Options 

lO __jauery Dynamic Content. m * 


Dolor Neque Placerat Sem Lacus Senectus 
Posuere Eleifend Amet 


Scelerisque. Vivamus at interdum aliquam turpis euismod adipiscing dolor nec fusce nulla amet facilisis fusce montes donec enim integer habitant euismod dignissim sodales eu dui Lacus 
potenti gravida gravida. Amet cum. Accumsan hac. e 


Ligula. Sodales, suscipit elementum. Faucibus tincidunt feugiat consectetuer cum accumsan platea mauris augue curae; semper risus. Dapibus Scelerisque. Ante proin leo. Dolor, arcu 
sociis mattis conubia nisi mi venenatis montes molestie mi, per. Fermentum enim iaculis magnis nonummy. 


Rutrum tortor aptent vestibulum aliquet. Sollicitudin, mattis cras ac accumsan bibendum pellentesque platea sociosqu parturient ad ligula. Sociis nisi mus venenatis maecenas vel quisque. 4 
Volutpat turpis praesent tempus nulla. 


Pa Console HTML CSS Script DOM  Netv PageSpeed Page Speed Activity YSlow ( joco 
ij | Clear Persist : All HTML CSS JS ETTY images Flash 
URL | Status | Domain | Sire | Timeline | 
Y GET ajax-contenthtml 200 OK smashingjquery.com 1016 B | NN 707 | 


Headers Response Cache HTML | 


Response Headers 


Date Sat, 25 Sep 2010 21:11:55 GMT 


Server Apache mod fcgid/2.3.5 Phusion Passenger/2.2.15 mod auth passthrough/2.1 mod bwlimited/1.4 ProntPage 
/5.0.2.2635 


Last-Modified Sat, 18 Sep 2010 14:16:14 CMT 
Etag "23b9eb1-3£8-4908952634780" 
Accept-Ranges bytes 
Content-Length 1016 
Keep-Alive timeout-5, max-99 
Connection Keep-Alive 
Content-Type text/html 


Request Headers 


Host smashingjquery.com 
User-Agent Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 
Accept text/html, +/+ 
Accept-Language en-us,en;q-0.5 
Accept-Encoding gzip,deflate 
Accept-Charset 150-8859-1,utf-8;g-0.7,*;g-0.7 


区 Done BA 25.3K 0.529s 2 


图 9-3 ”使 用 .1oad() 方 法 动态 载 人 内 容 


9.22 在 内 容 载 入 失败 时 处 理 错误 
如 果 我 们 要 载 入 的 内 容 不 存在 怎么 办 ? 由 于 我 们 的 用 户 看 不 到 内 容 ， 他 们 或 许 会 结束 访问 ， 
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揣 着 一 肚子 怨言 离开 我 们 的 站 点 。 为 了 改进 前 面 的 脚本 , 我 们 需要 传递 一 个 检查 文件 是 否 存在 的 
回调 函数 。 如 果 文 件 不 存在 或 者 因为 其 他 原因 无 法 载 人 , 我 们 可 以 显示 一 条 消息 。 出 错 处 理 是 一 
个 好 的 编程 习惯 ， 我 们 应 该 在 编写 的 每 个 脚本 中 做 好 错误 处 理 。 

.10ad() 方 法 的 回调 函数 支持 3 个 参数 ( 如 表 9-1 所 示 )。 利 用 xMLHttpRequest 对 象 可 得 到 
Ajax 请 求 的 响应 码 ， 对 不 同 的 响应 码 我 们 执行 不 同 的 行为 。 

$(selector).load(URL, function(responseText, textStatus, XMLHttpRequest) { 


// 检查 不 同 的 响应 码 
}) 


39-1 XHR 请 求 属性 


属 性 名 Hio XR 
responseText 以 字符 串 形 式 返回 响应 数据 
textStatus 以 XML 数据 形式 返回 响应 数据 
XMLHttpRequest 返回 状态 码 ， 比 如 “404” (表示 “NotFound” ) X4 "200" (XR "OK" ) 


Æ Á www.w3schools.com/dom/dom _http.asp 


接着 前 面 的 代码 ， 我 来 讲解 一 下 如 何在 回调 函数 中 添加 一 点 代码 ， 使 用 表 9-2 列 出 的 服务 器 
响应 码 捕获 任意 的 错误 。 图 9-3 展 示 的 就 是 这 个 例子 。 服 务 器 响应 码 来 自 Web 服 务 器 ， 通 过 HTTP 
协议 传递 给 浏览 器 ,这 些 响应 码 通 过 XMLHttpRequest .status 进 行 传递 ,我 们 也 可 以 通过 Firebug 
的 XHR 面 板 查 看 这 些 响应 码 (参见 图 9-2， 在 Firebug 中 查看 Gmail 的 Ajax 请 求 )。 


表 9-2 常见 服务 器 错误 响应 码 


响 应 码 a X 
200 成 功 
301 永久 跳 转 
302 临时 跳 转 
400 错误 请 求 
401 未 授权 
403 禁止 访问 
404 未 找到 
500 服务 器 错误 


(1) 为 .1oad() 方 法 添加 另 一 个 参数 ， 即 回调 函数 ， 传 人 这 个 函数 支持 的 3 个 属性 参数 。 


$('#content').load('ajax-content-1.html1', 
function(responseText, textStatus, XMLHttpRequest) { 
1); 


(2) 在 回调 函数 中 添加 一 行 i£/else 语 句 , 检查 404 或 500 错 误 。 如 果 错 误 发 生 , 如 图 9-4 所 示 ， 
显示 一 条 条 错误 信息 Bo 否则 , 内 容 就 正常 载 人 ， 无 需 显 示 任 何 信息 。 
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$('#content') .load('ajax-content-1.html', 
XMLHttpRequest) { 


if (XMLHttpRequest.status == 404 || XMLHttpRequest.status == 500) { 
$('#content').html('There has been an error, 


function(responseText, textStatus, 


please try again later.'); 


) else ( 
// 什么 也 不 做 
} 
)); 
000 jQuery Dynamic Content 
Q- CE) Cx) GA) COC http://10.0.1.8/~Jakerutter/jquery/chap09/ajax-dynamic-content.html WY) Mi Goose Q) fer 
@ Disable + Æ Cookies + {CSS + =] Forms + | Images + @ Information * C} Miscellaneous * 2 Outline + Š$ Resize + J” Tools * {2) View Source + J) Options 
TT) Gauery Dynamic Content | O jQuery Dynamic Content eo) + = 


‘There has been an error, please try again later. 


+ L Console HTML CSS Script DOM Net» PageSpeed Page Speed Activity — YSlow eoo 
jj | Clear Persist © All HTML CSS JS €TTY Images Flash 

URL Status | Domain | Size | Timeline 

Y GET ajax-content.html 404 Not Found 10.0.1.8 2418 


Headers Response Cache HTML 


<IDOCTYPE HTML PUBLIC "-//IETP//DTD HTML 2.0//EN"> 
<html><head> 
<title>404 Not Pound</title> 

y 


unde/hl» 

<p>The requested URL /-jakerutter/jquery/chap09/ajax-content.html was not found on this server.</p> 

</body></html> 

1 request 2418 1ms (onload: 199ms) 


Qitro PRA 253k 02715 / 


图 9-4 “ 当 被 请 求 内 容 不 可 用 时 ， 一 条 404 错 误 信息 显示 出 来 


如 果 载 入 的 内 容 很 多 , 最 好 显示 一 个 载 和 动画， 以 便 让 用 户 知道 数据 正在 载 人 中。 我们 可 以 
在 .1o0ad() 方 法 前 添加 一 条 语句 ， 在 #content 元 素 中 添加 一 个 表示 载 人 中 的 动态 gif 图 片 (数据 
载 人 成 功 之 后 ， 就 会 蔡 换 这 张 图 片 )。 如 果 载 人 的 数据 量 很 少 ， 用 户 可 能 永远 也 没有 机 会 看 到 这 
张 图 片 ， 不 过 这 是 一 个 好 的 预 留 手段 ， 有 备 无 患 ， 不 用 担心 大 文件 载 和 或 者 缓慢 的 网 络 连 接 。 


$('#content').html('<img src="images/loading.gif" alt=""/>'); 
$('#content').load('ajax-content-1.html1', 
XMLHttpRequest) 

{ 

if (XMLHttpRequest.status == 404 || XMLHttpRequest.status == 500) { 


$('#content').html('There has been an error, 
} else { 


// 什么 也 不 做 
Pye 


function(responseText, textStatus, 


please try again later.'); 
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9.2.3 载 入 部 分 内 容 


me a Nas 在 .10ad() 方 法 中 以 参数 形式 传人 
ID 、 类 或 者 标签 名 字 就 能 做 到 这 


$(selector).load(URL class or id or tag name) 

在 下 面 这 个 例子 里 ， 我 继续 使 用 上 文 用 过 的 由 H2 和 3? 元素 组 成 的 示意 内 容 页 面 。 其 中 一 个 段 
Jk (pp 标签 ) 具有 special 类 。 我 还 准备 了 一 个 内 含 一 个 空 aiv#content 元 素 的 页 面 ， 用 它 来 存 
放 jQuery 载 入 的 内 容 。 在 本 例 中 ,我 仅仅 载 人 示意 页 面 中 那个 拥有 special 类 的 段落 ( 参见 图 9-5 )。 


一 点 。 


jQuery Dynamic Content 


we )* [f ^N (XJ (te) LY http://smashingjquery.com/code/chap09/ajax-dynamic-content.html WY) QM Coogle Qa) i> 
@ Disable * Æ Cookies * L] CSS + =] Forms + E Images * @ Information + (I Miscellaneous * 37 Outline * 2; Resize * gP Tools * $2) View Source + |j) Options 
In jQuery Dynamic Content T 


Ligula. Sodales, suscipit elementum. Faucibus tincidunt feugiat consectetuer cum accumsan platea mauris augue curae; semper risus. Dapibus Scelerisque. Ante proin leo. Dolor, arcu sociis 
mattis conubia nisi mi venenatis montes molestie mi, per. Fermentum enim iaculis magnis nonummy. 


$ k Console HTML CSS Script DOM | Netv | PageSpeed Page Speed Activity — YSlow 
ij : Clear Persist ; All HTML CSS JS ETTY Images Flash 


OURLO (| Staus | Domain. | Size | Timeline — — 
Y GET ajax-content.html 200 OK smashingjquery.c com 1 KB 


eco 


" — 


Headers Response Cache HTML 


<title>jQuery Content</title> 
<style> 
body {font-family: georgia; font-size: 12px;} 


<p>Rutrum <em>tortor</em> aptent vestibulum ali imet: Solli: pint in, mattis cras ac accumsan bibendum pellentesque a 
platea sociosqu parturient ad ligula. Sociis Rus ‘Vaiss muackniS vel le WolvipéE Kdcpls 
mraesent temnna nnlla. 


ai </n> M 
[Liz Done BBA 253K oes a 


图 9-5 只 有 special 类 对 应 的 内 容 被 载 人 当前 页 面 


(1) 创建 被 载 入 的 HTML 页 面 内 容 , 给 第 二 个 段落 加 上 special 类 。 在 第 二 步 中 要 通过 这 个 类 
抓 取 这 段 内 容 。 将 这 个 文件 另存 为 ajax-contenthtml。 


<!doctype html» 

<head> 
<title>jQuery Content</title> 
<style> 
body {font-family:georgia; font-size:12px; } 
</style> 

</head> 

<body> 


<hl>Dolor Neque Placerat Sem Lacus Senectus</h1> 
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<h2>Posuere Eleifend Amet</h2> 

<p>Scelerisque. Vivamus at interdum aliquam turpis euismod adipiscing dolor nec fusce 
nulla amet facilisis fusce montes donec enim integer habitant euismod dignissim sodales 
eu dui Lacus <em>potenti</em> gravida gravida. Amet cum. Accumsan hac.</p> 


<p class="special">Ligula. Sodales, suscipit elementum. Faucibus tincidunt feugiat 
consectetuer cum accumsan platea mauris augue <strong>curae;</strong> semper risus. 
Dapibus Scelerisque. Ante proin leo. Dolor, arcu sociis mattis conubia nisi mi venenatis 
montes molestie mi, per. Fermentum enim iaculis magnis nonummy.</p> 


<p>Rutrum <em>tortor</em> aptent vestibulum aliquet. Sollicitudin, mattis cras ac 
accumsan bibendum pellentesque platea sociosqu parturient ad ligula. Sociis nisi mus 
venenatis maecenas vel quisque. Volutpat turpis praesent tempus nulla.</p> 

</body> 
</html> 


(2) 在 当前 页 面 中 添加 一 个 #content 元 素 。 如 果 被 载 和 的 页 面 中 没有 选择 器 对 应 的 元 素 , 也 
就 没有 任何 内 容 会 插入 到 #content 元 素 内 ( 内 容 加 载 仍 会 发 生 )。 

<div id="content"></div> 

(3) 在 aocument 的 *eady 事 件 处 理 函 数 中 添加 一 条 语句 ， 选 中 #content 元 素 ， 然 后 载 人 
ajax-content.html 到 页 面 。 注 意 .1oad () 方 法 参数 中 的 special 类 ， 是 它 决定 了 只 有 special 类 对 
应 的 内 容 才 会 被 添加 到 页 面 中 。 


$ (document) . ready (function() { 
$('#content').load('ajax-content.html .special'); 


} 
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GET 和 POST 请 求 非常 相似 ， 它 们 都 能 把 表单 中 的 数据 传递 给 服务 器 端 进程 。 两 种 方法 各 有 
各 的 优点 ,各 有 各 的 缺点 。 通 常 都 是 后 端 程序 员 定义 好 请 求 类 型 ， 前 端 开 发 人 员 和 设计 师 只 管 使 
用 就 行 了 。 

1. 理解 GET 请 求 

GET 请 求 以 查询 字符 串 的 形式 把 数据 传递 给 服务 器 端 进程 。 表 单数 据 通过 查询 字符 串 从 一 个 
Web 页 面 或 应 用 程序 传递 到 另 一 个 Web 页 面 或 应 用 程序 .服务 器 端 进程 总 是 在 URL 中 拾取 键 值 对 ， 
并 依据 URL 中 的 查询 字符 串 直 接 改变 页 面 内 容 。 

这 里 是 一 个 查询 字符 串 的 例子 : 

http:// www.website.com?keyword-product&page-5&size-5&color-brown 

通过 查询 字符 串 传 递 参 数 , 风险 在 于 查询 字符 串 大 容易 被 用 户 修改 。 如 果 服 务 器 端 脚本 没有 
适当 的 安全 预防 机 制 , 黑客 就 能 人 侵 系统 并 进而 大 肆 破 坏 你 的 站 点 或 应 用 程序 。 出 于 安全 方面 的 
考虑 , 尽量 不 要 使 用 GET 请 求 传递 类 似 财 务 信息 、 密 码 或 其 他 要 传递 的 数据 及 显示 给 用 户 的 数据 。 
就 像 图 9-6 所 示 的 谷歌 搜索 结果 页 那样 ，GET 请 求 可 以 保存 为 书签 或 者 分 享 给 其 他 人 。 
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jquery forms - Google Search 


b> GS & Gf) Ca http: //www.google.com/#sclient=psy&hl=en&q=jquery+forms&aq=faagi=gl vy v ) (Ms. Google Qa) je 


@ Disable * / Cookies * J CSS + £] Forms + / Images * @ Information + C Miscellaneous + ./ Outline + 22 Resize * gP Tools + f>) View Source + J Options 


| $Y jauery forms - Google Search * - 
Web Images Videos Maps News Shopping Gmail more v jake.rutter@gmail.com | Web History | Settings v | Sign out 
( oogle jauery fo X | Search | "5" 
About 1,560,000 results (0.27 seconds) Advanced search 
3 Everything Rich Forms with jQue Sponsored link 
@ Images sencha.com Download Ext JS to add rich Ul components on top of jQuery. 
llli Videos (Query Form Plugin 
E| News The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use 
AJAX . The main methods, ajaxForm and ajaxSubmit , gather ... 
v) More jquery.malsup.com/form/ - Cached - Similar E 
Any time 55 jQuery Form Plugins To Download And Use | Design your way 


Lait Jun 30, 2010 ... Default forms are boring and that's for certain. Styling your form with a 
jQuery plugin is the solution for your aesthetic issues with basic ... 
Past 2 months www.designyourway.nel/.../55-jquery-form-plugins-to-download-and-use/ - Cached 
- 
Monaco om Uniform - Sexy forms with jQuery 
Feb 9, 2010 ... This parameter allows you to use a jQuery-style selector to point to a "reset" 
button in your form if you have one. ... 
pixelmatrixdesign.com/uniform/ - Cached - Similar 


10+ JQuery tutorials for working with HTML forms - CatsWhoCode.com 

Aug 10, 2009 ... JQuery can help you lots with form validation, and this tutorial will tell you how 
to build a JQuery form validation from scratch. 
www.catswhocode.com/.../10-jquery-tutorials-for-working-with-html-forms - Cached - Similar 


25 jQuery Plugins for Working with Forms - Web Design Blog ... 

Jan 25, 2010 ... Almost every website uses a form of some kind. Contact forms and other 
types of forms can be enhanced with the use of a number of jQuery ... 
designm.ag/resources/jquery-form-plugins/ - Cached - Similar 


Plugins:Forms - jQuery JavaScript Library 
The Forms Plugin provides extensions to the basic functionality provided by jQuery, as well as 


luz Done # Wà Yslow 
© 2010, Google 


Is lai 


图 9-6 使 用 了 GET 请 求 的 谷歌 搜索 结果 页 


2. 理解 POST 请 求 

POST 请 求 与 GET 请 求 不 同 , 它 在 “幕后 ”发 送 数据 给 服务 器 端 进程 , 这 使 得 POST 方 法 比 GET 
更 安全 ， 特 别 是 在 传递 敏感 数据 时 。 与 GET 请 求 相 比 ，POST 请 求 能 够 一 次 传递 大 量 的 数据 给 服 
务 需 端 程序 。( 而 GET 请 求 受 URL 长 度 限制 ， 一 次 只 能 传递 较 少 的 数据 。) 

如 果 提 交 了 一 个 POST 请 求 并 尝试 刷新 页 面 ， 浏 览 器 会 提示 你 页 面 需要 重新 发 送 数据 到 服务 
器 。 这 是 由 POST 请 求 结 构 化 的 特点 决定 的 。 

在 jQuery 中 使 用 .ajax() 方 法 处 理 POST 和 GET 请 求 。 这 个 方法 支持 许多 参数 , 用 于 控制 数据 
如 何 发 送 到 服务 器 以 及 如 何 接收 数据 。 


$.ajax ({ 
type: 'POST', 
url: url, 
data: data, 
success: success, 
dataType: datatype 
1); 


如 果 我 们 用 原生 JavaScript 实 现 这 个 方法 , 最终 将 会 得 到 一 段 与 下 面 类 似 的 代码 。 我 们 需要 为 
不 同 的 浏览 右 编 写 不 同 的 RMLHEtpReauest 方 法 。jQuery 以 一 个 又 棒 又 干净 的 .ajax() 方 法 蔡 我 
们 处 理 好 了 这 一 切 。 
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function loadXMLDoc() { 
if (window. XMLHttpRequest) { 
// 针对 IE7+, Firefox, Chrome, Opera, Safarit Ææ 
xmlhttp-new XMLHttpRequest(); 


) else ( 
// 针对 IE6、IE5 的 代码 
xmlhttp-new ActiveXObject("Microsoft.XMLHTTP"); } 


xmlhttp.onreadystatechange=function() { 
if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
document .getElementById("myDiv") .innerHTML=xmlhttp.responseText; } 


} 
xmlhttp.open("GET","ajax info.txt",true); 
xmlhttp.send(); 


} 

3. 使 用 POST 方法 实现 无 页 面 刷新 的 联系 人 表单 提交 

由 于 联系 人 表单 通常 包含 个 人 信息 及 需要 保密 的 敏感 信息 ， 因 此 特别 适合 使 用 POST 请 求 提 
交 。POST 请 求 也 常常 用 于 登录 和 注册 表单 ， 比 如 图 9-7 所 示 的 Minitcom 的 注册 表单 页 就 使 用 了 
POST 请 求 。 


ooo Mint.com » Start Here e 
GJ- Ce) GO CR). GE ps /ws mint com /ooin event?ask-s Yr) QM cose a) iS 


© Disable " Æ Cookies + LJ CSS = ©] Forms « [M Images * @ Information * C Miscellaneous * .;" Outline * Š$ Resize * jj^ Tools + {2) View Source * > Options 


Fnint com SignUp Login 


createanewaccount & 


Your Email gae Am m 


Confirm Email i cie cm 


esae cose [ — ] 


g 
er your zipcode. * Sus 


© Yes, I agree to the Mint.com Terms of Use 


1Mint.com 许 可 复制 
图 9-7 Mint.com 使 用 POST 请 求 处 理 账 号 注册 表单 


在 jQuery 中 使 用 POST 请 求 提交 数据 极其 容易 。 和 绝 大 多 数 jQuery 方 法 一 样 ， 使 用 POST 请 求 
提交 数据 也 有 两 种 方式 可 用 ,一 是 标准 方式 ,一 是 快捷 方式 .下 面 两 段 代码 中 ,第 一 段 使 用 .post O 
方法 ， 这 是 标准 方式 。 第 二 种 使 用 .ajax() 方 法 ,由 于 .ajax() 方 法 能 够 处 理 多 种 请 求 ， 所 以 它 
是 快捷 方式 ， 也 是 我 们 推荐 使 用 的 方式 。” 


CD 作者 和 我 们 的 思维 方式 有 所 不 同 ， 作 为 一 名 中 国人 ， 我 一 直觉 得 $.get/$.post 这 些 方法 才 是 快捷 方法 〈 更 少 的 
参数 使 用 ， 更 方便 )， 而 $.ajax() 因为 要 设置 大 量 参数 反而 较 少 用 。 
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$.post(url, [data], [success], dataType) ; 


$.ajax(( 
url: url, 
data: data, 
success: success, 
dataType: dataType 
1); 


由 于 我 们 不 能 通过 查询 字符 串 看 到 参数 ， 在 浏览 器 中 调试 POST 提交 很 有 挑战 性 。 我 们 可 使 
用 Firebug 监 视 XHR 请 求 并 查看 它们 “幕后 ”传递 的 参数 ， 见 图 9-8。 


Contact | Jake Rutter - Front-End Developer and Designer, CSS, JavaScript and jQuery, PHP, Wordpress, Expression Engine, Magento 
WY Bo (€) CD ($2 a http: //onerutter.com/contact 国立 7 ) GM coogle Q) te 


@ Disable + Æ Cookies + |. CSS + E] Forms + 
Tl contact | Jake Rutter - Front-End ... 


|E Images * @ Information * 3 Miscellaneous + 7 Outline + $3 Resize + J Tools + $) View Source » 4 Options 


About Jake Rutter Blog Web Design and Development Portfolio eCommerce jQuery JavaScript OpenSource Contact 


«ef jake rutter 


Ofin FHAS 


EY FEEDEURNER, 


Contact 


Success! Thanks for filling out my form! 


AX Console HTML CSS Script DOM Net» | Page Speed YSlow 
i : Clear Persist :CT HTML CSS JS XHR Images Flash 
Headers Post Response HTML 


Parts 
Field1 Jake 


Field2 Rutter 
Field3 jake. ruttertiy 
Field109 R 
Field109-1 
Field109-2 
Field4 
Field107 Freelance Inquiry 
Field105 
currentPage hwlKz5Hs775GbskBAGzwgwuBeynl733iklk9tqtFOL3TKY- 
comment 
idstamp JpgnPo*/dvNT2KJ70Bma6/4NEvzbKXHoJPGiPufÜweE- 
stats {"errors": 0, "startTime": 2300, "endTime": 29765, "referer": “http: //onerutter.com/contact"} 
clickOrEnter click 


Source 
Content-Type: multipart/form-data; boundarys--------------—------------| 168072824752491622650073 


Content-Length: 1804 < 


了 


E Done 
由 Mint.com 许 可 复制 
图 9-8 “联系 我 们 ”表单 使 用 POST 请 求 提 交 参 数 后 的 画面 
(1) 准备 用 来 提交 给 服务 器 的 HTML 表 单 。 由 于 input 元 素 的 ID 将 在 下 一 步 操 作 中 使 用 , 因此 
为 每 个 input 元 素 选 择 不 同 的 ID 至 关 重 要 。 


<form id="contact-form"> 
<ul> 
<li><label>Name</label> 


# Wa D 603.3k 25625 


<input type="text" id="name" name="name"/> 
</li> 

<li><label>Email</label> 

<input type="text" id="email" name="email"/> 
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</li> 
<li><label>Phone</label> 
<input type="text" id-"phone" name="phone"/> 
</li> 
<li><label>Message</label> 
<textarea name="message" id="message"></textarea> 
</li> 
<li><input type="submit" id-"submit"/»«/li» 
</ul> 
</form> 


设想 下 面 的 场景 : 用 户 登 录 我 们 的 站 点 ,填写 表单 ， 然 后 使 用 Ajax 请 求 把 数据 悄悄 地 提交 到 
服务 器 。 


(2) P oM 为 它 绑 定 click 事 件 处 理 函 数 。 添 加 一 行 *eturn false 语 句 ， 阻止 
提交 按钮 的 默认 行 


$('#submit').bind('click', function() { 
return false; 


323 
(3) 接 下 来 ， 引 入 4 个 变量 一 一 nameVal、emailvVal、phoneVal 和 msgval， 并 把 这 些 变 量 的 
值 设 置 为 相应 input 元 素 的 值 。 这 样 我 们 就 从 表单 中 获取 到 即将 传递 给 服务 器 的 各 个 值 。 


$('#submit').bind('click', function() { 
var nameVal = $('#name').val(); 
var emailVal = $('#email').val(); 
var phoneVal = $('#phone').val(); 
var msgVal = $('#message').val(); 
return false; 


1): 


(4) 在 这 些 变 量 之 后 添加 $ .post () 方 法 调用 。 为 使 $.post () 方 法 正常 工作 ， 我 们 必须 传人 
所 有 的 表单 参数 。 我 们 将 上 一 步 得 到 的 参数 值 以 键 值 对 的 形式 传递 给 $.post () 方 法 。 


$('#submit').bind('click', function() { 
var nameVal = $('#name').val(); 
var emailVal = $('#email').val(); 
var phoneVal = $('#phone').val(); 
var msgVal = $('#message').val(); 
$.post("form.php", 
(name:nameVal, 
phone:phoneVal, 
email:emailVal, 


message:msgVal) 
); 
return false; 


1); 


(5) 最 后 ， 不 管 是 用 它 检查 错误 ， 还 是 在 提交 失败 时 显示 错误 信息 给 用 户 ， 我 们 总 要 引入 一 
个 回调 函数 。 在 $.post () 方 法 中 ， 表 单 参数 之 后 ， 我 们 传人 一 个 回调 函数 参数 。 图 9-9 展 示 的 是 
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浏览 器 中 下 面 的 代码 提交 给 服务 器 的 参数 。 


$('tsubmit').bind('click', function() { 
var nameVal = $('#name').val(); 
var emailVal = $('#email').val(); 
var phoneVal = $('#phone').val(); 
var msgVal = $('#message').val(); 
S$.post("form.php", 
{name:nameVal, 
phone: phoneVal, 
email:emailVal, 
message:msgVal}, function(data) { 

alert ('Successful Submission'); 


jQuery Dynamic Content 


(tr) Go http: //smashingjquery.com/code/chap09/ajax-form-get. himimenssaeee v ) Cas Googie Q) ie, 


9» Disable + Æ Cookies + | CSS - ©] Forms + il Images + @ Information + (3 Miscellaneous + 7 Outline + 22 Resize 
In jQuery Dynamic Content 十 


M F Tools + {2] View Source + > Options 
Ls 


* Name 
* Email 


© Phone| 


eM 
© ( Submit Query ) 


Ey Console HTML CSS Script DOM Net  PageSpeed Page Speed Activity YSlow 
W | Clear Persist : (fT HTML CSS JS XHR Images Flash 
URL | Status | Domain | Size | Timeline 
GET form.php?name=Jal Aborted smashingjquery.com ? |1ms 
Y GET ajax-form-gethtml 200 OK smashingjquery.com 10018 | 122": 


eco 


Params Headers Response Cache HTML 


email jake@gmail.com 
message Just testing 

name Jake 

phone 2031231234 


2 requests. 10018 194ms (onload: 569ms) 


a WBA 30.0k 0.568 J 


图 9-9 ”表单 提交 之 后 ， 人 参数 已 被 提交 到 服务 器 
9.4 操作 XML 数据 


XML 表示 可 扩展 标记 语言 ， 问 世 于 1996 年 ， 算 不 上 新 技术 。XML 是 跨 平台 的 公共 标准 ,我 
们 可 以 使 用 它 定义 个 性 化 的 数据 结构 。XML 广 泛 用 于 各 种 应 用 程序 ， 如 提交 银行 数据 、 创 建 RSS 
(简单 资讯 聚合 ) 种 子 等 。 可 以 说 XML 无 处 不 在 ， 是 一 种 值得 信赖 的 数据 传递 方法 。 图 9-10 展 示 
的 是 来 自 Smashing Magazine ( www.smashingmagazine.com ) 的 RSS 订 阅 源 。 
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Smashing Magazine Feed 


(4) >)- (eO ( (会) CA http://rssl.smashingmagazine.com/feed/ Wy) Gy Google Q) i&" 


@ Disable + Æ Cookies + J CSS + ©] Forms * Mi) Images * @ Information * 3 Miscellaneous * . Outline + ŽŽ Resize + J^ Tools + $>] View Source * 4» Options 
ba Smashing Magazine Feed * = 


Subscribe to this feed using | £y Live Bookmarks 
D 
C) Always use Live Bookmarks to subscribe to feeds. 


( Subscribe Now ) 


Me 


Smashing Magazine Feed 


Turning All Clients Into Dream Clients (or Common Client Difficulties) 
September 25, 2010 3:53 AM 


Ly] 
fe, 
Veer makes it AWESOME & UNIQUE D 
E] easier to be creative. d 
pj ; x 
aa o 
E— spend on images & fonts. <9 
= 
= 3D IMAGE SLIDER 


ENHANCE YOUR WEBSITE 


FlippingBook Photographer 


Clients can be tough... real tough. Working side by side with some clients can be an agonizing experience — an experience so painful that you often 
wonder what exactly you have gotten yourself into. On the other hand, some clients are an absolute dream to work with. Every day spent working 
with them reminds you why you became a Web designer and just how enjoyable your job actually is. The question then is, how do we take our most 
difficult clients and turn them into dream clients? The answer may be easier than you realize. 


Ir 
| . . 
H @smashingmag How about expecting JE 
luz Done # Wa vstow 


Smashing Media GmbH, FH Sven Lennartz 和 Vitaly Friedman 创 建 


图 9-10 Smashing Magazine 提 供 的 RSS 订 阅 源 


想象 这 样 的 场景 : 你 的 主页 上 有 一 些 旋转 木马 的 图 片 。 这 些 图 片 来 自 一 个 商业 用 户 ,他 负责 
上 传 并 维护 这 些 图 片 ， 为 每 张 图 添加 标题 、 描 述 及 一 个 URL ( 用 户 单 击 图 片 将 被 导航 至 该 URL )。 
你 可 以 找 一 个 程序 员 一 起 创建 图 片 数 据 的 XML 数据 源 ， 然 后 每 日 进行 更 新 。 然 后 你 就 可 以 使 用 
jQuery 对 订阅 源 发 起 GET 请 求 来 生成 主页 的 旋转 木马 图 片 。 使 用 XML 订阅 源 的 好 处 是 它 支 持 像 
Flash、 移 动 应 用 程序 等 前 端 平台 。 从 某 种 意义 上 说 , 这 样 可 用 一 种 数据 结构 满足 多 种 应 用 程序 的 
需求 ， 并 且 只 需要 程序 员 介入 一 次 ， 完 成 XML 数 据 源 的 开发 。 

使 用 XML 的 缺点 是 只 能 使 用 和 你 工作 的 站 点 同 域 的 XML 数据 ， 并 且 代 码 腑 肿 。 如 果 你 希望 
和 其 他 域名 下 的 数据 打交道 ， 就 需要 在 客户 端 使 用 JSON-P 技 术 ， 我 会 在 下 一 个 解决 方案 中 讲解 
这 一 技术 。 

我 使 用 下 面 的 XML 代码 创建 了 一 个 XML 文件 ,并 将 在 下 面 的 XML 解决 方案 中 使 用 这 个 文件 。 
我 把 这 个 文件 保存 为 favoritebooks.xml， 并 把 它 和 其 他 文件 放 到 同一 个 目录 下 。 后 端 程序 员 可 以 
让 服务 器 上 的 程序 实时 生成 XML 数据 ， 相 应 地 ， 我 们 可 以 获取 这 些 数据 并 利用 它们 做 事 。 

XML 使 用 分 层 结构 ， 可 以 描述 成 一 棵 拥有 父子 分 支 的 家 谱 树 ， 其 中 的 元 素 又 称 为 节点 。 下 
面 的 代码 是 一 个 XML 示例 ， 图 9-11 展 示 的 是 该 XML 在 浏览 器 中 的 呈现 。 
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(<)>) 
Ms 

© Disable + Æ Cookies + |. CSS + 回 Forms + Œ| Images + @ Information + | Miscellaneous * -7 Outline + 27 Resize * gP Tools + $2) View Source * ¿> Options 
] DD http://smashingj..avoritebooksxm! | + z 


Mozilla Firefox Se 


Ce) (x) te) CL) C htp://smashingjquery.com/code/chap09/favoritebooks.xml WY) Chi Goodie Q) ir 


This XML file does not appear to have any style information associated with it. The document tree is shown below. 


- <ReadingList> 
一 <Book author="Bill Bryson"> 
- «Title» 
Tm a Stranger Here Myself: Notes on Returning to America After 20 Years Away 
</Title> 
<Category>Travel</Category> e 
<PubDate>06/2000</PubDate> 
<ISBN>0767903820</ISBN> 
</Book> 
— «Book author="Andre Agassi"> 
<Title>Open: An Autobiography</Title> 
<Category>Biography</Category> 
<PubDate>11/2009</PubDate> 
<ISBN>0307268198</ISBN> 
</Book> 
— «Book author="Guy Kawasaki"> 
- «Title» 
The Art of the Start: The Time-Tested, Battle-Hardened Guide for Anyone Starting Anything 
</Title> 
<Category>Business</Category> 
<PubDate>09/2004</PubDate> 
<ISBN>1591840565</ISBN> 
</Book> 
一 <Book author="Jessica Livingston"> 
<Title>Founders at Work: Stories of Startups’ Early Days</Title> 
<Category>Business</Category> 
<PubDate>09/2009</PubDate> 


i; Done # Wa vstow 


图 9-11 在 Firefox 浏 览 器 中 访问 前 面 的 XML 代码 


<?xml version-"1.0" encoding-"utf-8" ?> 
<ReadingList> 

<Book author="Bill Bryson"> 
<Title>I'm a Stranger Here Myself: Notes on Returning to America After 20 Years 
Away</Title> 
<Category>Travel</Category> 
<PubDate>06/2000</PubDate> 
<ISBN>0767903820</ISBN> 

</Book> 

<Book author="Andre Agassi"> 
<Title>Open: An Autobiography</Title> 
<Category>Biography</Category> 
<PubDate>11/2009</PubDate> 
<ISBN>0307268198</ISBN> 

</Book> 

<Book author="Guy Kawasaki"> 
<Title>The Art of the Start: The Time-Tested, Battle-Hardened Guide for Anyone 
Starting Anything</Title> 
<Category>Business</Category> 
<PubDate>09/2004</PubDate> 
<ISBN>1591840565</ISBN> 

</Book> 

<Book author="Jessica Livingston"> 
<Title>Founders at Work: Stories of Startups' Early Days</Title> 
<Category>Business</Category> 
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<PubDate>09/2009</PubDate> 
<ISBN>1430210788</ISBN> 

</Book> 

<Book author="Jason Fried"> 
<Title>Getting Real: The smarter, faster, 
application</Title> 
<Category>Business</Category> 
<PubDate>09/2009</PubDate> 
<ISBN>0578012810</ISBN> 

</Book> 

</ReadingList> 


easier way to build a successful web 
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使 用 前 面 例子 中 的 XML ， 我 们 使 用 jQuery 通过 Ajax 请 求 载 人 XML 数据 ， 然 后 解析 XML 生成 
HTML 内 容 。 我 们 将 使 用 $.ajax() 方 法 ， 不 过 你 也 可 以 使 用 快捷 方法 $.get () 。 载 入 XML 非常 
容易 ， 只 要 寥 容 几 行 jQuery 代码 就 能 完成 。 这 是 两 个 步骤 : 首先 ， 加 载 XML; 其 次 ,在 回调 函数 
中 解析 得 到 的 XML 数 据 ( 回调 函数 仅 在 XML 成 功 加 载 后 执行 )。 

这 个 脚本 最 终 的 运行 结果 是 一 个 包含 我 最 喜欢 的 5 本 书 的 无 序列 表 ， 如 图 9-12 所 示 。 


jQuery Ajax XML 


(ale) ap (CX) Ga) Q http://smashingjquery.com/code/chap09/ajax-readxml.html Wy) QU Goose Qa) 型" 
@ Disable + Æ Cookies + J CSS » ©] Forms + |E] Images * @ Information + 
1 n jQuery Ajax XML 十 


My Favorite Books 


Miscellaneous + .,/ Outline + 22 Resize * gP Tools + f>) View Source + = Options 


‘Title: I'm a Stranger Here Myself: Notes on Returning to America After 
20 Years Away 
Author: Bill Bryson 
Travel - 06/2000 
‘Title: Open: An Autobiography 
Author: Andre Agassi 
Biography - 11/2009 e 
Title: The Art of the Start: The Time-Tested, Battle-Hardened Guide for 
Anyone Starting Anything 
Author: Guy Kawasaki 
Business - 09/2004 
Title: Founders at Work: Stories of Startups' Early Days 
Author: Jessica Livingston 
Business - 09/2009 
Title: Getting Real: The smarter, faster, easier way to build a successful 
web application 
Author: Jason Fried 
Business - 09/2009 
P Ey Console HTML CSS Script DOM  Netv  PageSpeed Page Speed Activity YSlow eco 
ij : Clear Persist :CW HTML CSS JS XHR Images Flash 
URL | Status | Domain | Size | Timeline | 
> GET ajax-readxml.html 304 Not Modified — smashingjquery.com 1.1KB en; 
> GET jquery.minjs 304 Not Modified — ajax.googleapis.com 24.1 KB Bl 25: 
Y GETfavoritebooks.xm! 304 Not Modified smashingjquery.com — 1KB | EL 
Headers Response Cache XML 
<?xml version="1.0" encoding-"utf-8" ?> 
*ReadingList» 
<Book author="Bill Bryson"> 
<Title>I'm a Stranger Here Myself: Notes on Returning to America After 20 Years Away</Title> 
<Category>Travel</Category> 
<PubDate>06/2000</PubDate> 4 
<ISBN>0767903820</ISBN> A 
E Done 


# BA 25.8K 0.5895 / 


图 9-12 ”得 到 XML 并 生成 My Favorite Books ( 我 最 喜欢 的 书 ) 组 件 
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(1) 首先 ， 我 们 需要 准备 存放 书籍 无 序列 表 的 HIML。 创 建 一 个 无 序列 表 ul#books。 


<ul id="books"> 
<hl>My Favorite Books</h1> 
</ul> 


(2) 接着 调用 $ .ajax() 方 法 并 提供 4 个 参数 : type 人 参数 代表 请 求 类 型 ， 我 们 在 这 里 使 用 GET 
方式 ; dataType 参 数 是 XML; ur1 人 参数 是 favoritebooks .xml; 回调 函数 是 parseXML。 


$.ajax({ 

type: "GET", 

dataType: "XML", 

url: "favoritebooks.xml", 
success: parseXML 


1); 

(3) 生成 一 个 空白 的 回调 函数 parseXML。 它 有 一 个 参数 xml ， 代 表 收 到 的 XML 数据 。 不 管 回 
调 函 数 中 是 否定 义 了 这 个 参数 ,jQuery 都 会 自动 传递 参数 给 回调 函数 。 参 数 的 内 容 取决 于 回调 函 
数 的 定义 类 型 (success 回调 还 是 srror 回 调 )。 


function parseXML(xml) { 


} 


(4) fEparsexMLPK ZI Pd 24 ie Peat, 然后 调用 . find() 方 法 和 .each () 方 法 找 出 每 一 个 
Book W TR 


function parseXML(xml) { 
$ (xml) .find("Book") .each(function() { 
1); 

} 


(5) 创建 4 个 变 量 一 一 author、title、category 和 pubdate。 使 用 不 同 的 选择 器 得 到 需要 
的 数据 赋 给 这 些 变量 。 由 于 author 是 Book 节 点 的 属性 ， 所 以 我 们 需要 使 用 获取 属性 的 方 
法 .attz() 得 到 。 剩 下 的 几 项 都 可 以 通过 用 .find() 方 法 搜索 当前 节点 并 抓 取 相应 的 文本 得 到 。 


function parseXML(xml) { 
$(xml).find("Book").each(function()( 
var author = $(this).attr('author'); 
var title = $(this).find('title').text(); 
var category = $(this).find('category').text(); 
var pubdate - $(this).find('pubdate').text(); 
1); 
} 


(6) 设置 所 有 这 些 变量 之 后 , 现在 可 以 生成 HTIML 了 。 使 用 $('<11i></1i>') 生 成 一 个 11 元 素 ， 
然后 使 用 .html () 方 法 ， 把 由 标签 字符 串 和 变量 拼接 而 成 的 HTML 内 容纳 入 这 个 1i 元 素 ， 最 后 将 
它 妃 加 到 ul#books 中 去 。 


function parseXML(xml) { 
$ (xml) .find ("Book") .each(function() { 
var author = $(this).attr('author'); 
var title = $(this).find('title').text(); 
var category = $(this).find('category').text(); 
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var pubdate = $(this).find('pubdate').text(); 
$('«li»«/li»').html('«b»Title:«/b» '+title +'</br><b>Author</b>: '+ author 
+'</br>'+category +' - '+pubdate).appendTo('#books'); 
1); 
} 


9.6 操作 JSON 数据 


JSON 表 示 JavaScript 对 象 表示 法 ， 它 类 似 于 XML, 但 只 服务 于 JavaScript。"JSON 人 允许 我 们 以 
键 值 对 的 形式 创建 自己 的 数据 结构 JSON 和 XML 的 相似 之 处 在 于 它们 都 是 层级 结构 ,都 支持 Ajax 
处 理 。 

与 XML 相 比 ，JSON 有 一 些 先进 之 处 ， 而 且 我 个 人 认为 JSON 可 读 性 更 好 。 使 用 JSON 时 ， 我 
们 无 需 使 用 标签 定义 结构 , 因为 数据 本 身 就 定义 了 结构 。 使 用 这 种 更 干净 的 方案 , 代码 要 比 XML 
方案 简洁 得 多 , 更 容易 开发 ,也 更 容易 理解 。 网 上 有 关 JSON 更 好 还 是 XML 更 好 的 争论 此 起 彼 伏 ， 
因此 我 刚刚 发 表 的 意见 仅 代表 个 人 看 法 。 

下 面 是 一 个 JSON 代 码 示例 ( 参见 图 9-13 )。 我 使 用 与 前 面 XML 例 子 完全 相同 的 数据 , 便于 大 
家 对 这 两 种 类 型 的 数据 进行 比较 。 第 一 印象 就 是 JSON 的 可 读 性 更 好 。 这 算 不 算 一 大 优势 值得 次 
椎 一 一 毕竟 绝 大 多 数 时 候 是 你 的 脚本 ( 而 不 是 我 们 ) 读 取 这 些 JSON 代 码 。 


("books":[| 
{ 
"title": "I'm a Stranger Here Myself: Notes on Returning to America After 
20 Years Away", 
"author": "Bill Bryson", 
"Category": "Travel", 


"pubdate": "06/2000", 
"isbn": "0767903820" 


title": "Open: An Autobiography", 
"author": "Andre Agassi", 
"category": "Biography", 


"pubdate": "11/2009", 
"isbn": "0307268198" 


"title": "The Art of the Start: The Time-Tested, Battle-Hardened Guide for 
Anyone Starting Anything", 

"author": "Guy Kawasaki", 

"category": "Business", 

"pubdate": "09/2004", 

"isbn": "1591840565" 

Ja 

{ 


"title": "Founders at Work: Stories of Startups' Early Days", 


CD 这 种 说 法 不 确切 ， 如 今 几 乎 所 有 的 语言 都 支持 JSON 数 据 。 


210 第 9 章 Ajax 与 动态 数据 处 理 


"author": "Jessica Livingston", 
"Category": "Business", 
"pubdate": "09/2009", 

"isbn": "1430210788" 

be 

{ 


"title": "Getting Real: The smarter, faster, easier way to builda 


successful web application", 
"author": "Jason Fried", 
"Category": "Business", 
"pubdate": "09/2009", 
"isbn": "0578012810" 


mm A Mozilla Firefox 
(4)*2)- GS) (X) Cft). CL) hup://smashingjquery.com/code/chap09/favoritebooks.js wv) Mi cooole Q) igi: 


z 7 TA kesi 
@ Disable * Æ Cookies * L CSS + [| Forms * |E] Images * @ Information + Miscellaneous * ../ Outline * 72 Resize + 


J^ Tools + $>) View Source + 4 Options 


| D) hetp://smashingj...favoritebooksjs PP = 
1 
"books" :[ 
1 
"title": "I'm a Stranger Here Myself: Notes on Returning to America After 20 Years Away", 
"author" Bi. z 
"category a" 


"pubdate": " 
"isbn": "0767903820" 


"title": "Open: An Autobiography", 
"author" "Andre Agassi", 


a e 
"pubdate": , 

"isbn": "0307268198" 

"d 

"title": "The Art of the Start: The Time-Tested, Battle-Hardened Guide for Anyone Starting Anything", 
"author" "Guy Kawasaki" 


"Category": "Business" 
"pubdate" : "09/2004", 
"isbn": "1591840565" 


"title": "Founders at Work: Stories of Startups' Early Days", 
"author": "Jessica Livingston", 

"category": "Business", 

"pubdate": "09/2009", 

"isbn": "1430210788" 


"author": "Jason Fried", 
"category": "Business", 
"pubdate": "09/2009", 
"isbn": "0578012810" 


图 9-13 前面 的 JSON 代 码 显示 在 浏览 器 中 


title": "Getting Real: The smarter, faster, easier way to build a successful web application", 


3 B Ysiow 


当 我 们 撰写 JSON 代 码 时 ， 可 以 使 用 验证 工具 来 确保 写 出 来 的 JSON 代 码 是 正确 无 误 的 。 如 果 
代码 中 有 错误 ， 当 使 用 GET 方 法 获取 JSON 数 据 到 页 面 时 ， 我 们 只 会 得 到 出 错 信 息 而 非 我 们 想 要 
的 数据 。Douglas Crockford 编 写 了 一 个 名 叫 JSONLint ( www.jsonlint.com ) 的 JSON 验 证 程序 ， 如 
图 9-14 所 示 。 它 接受 原始 JSON 代 码 或 者 JSON 代 码 所 在 的 URL。 如 果 我 们 提供 给 这 一 验证 工具 的 
JSON 数 据 有 问题 ,就 会 得 到 有 用 的 错误 信息 。 图 9-14 展 示 的 是 我 把 前 面 的 SON 代 码 交 给 JSONLint 


检验 并 验证 通过 的 结果 。 
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JSONLint - The JSON Validator. 


(4 Je )- CE) (x) te) Ci htp://wwwjsonlint.com/ Wy) GM Coogle Q) ii 
@ Disable + Æ Cookies + L] CSS + =] Forms + / Images + @ Information + | ^ Miscellaneous » 2/ Outline + | Š Resize + ^ Tools + {2) View Source * <> Options 
()  JSONLint - The JSON Validator. PF = 
AT ^ ab. Follow us on Twitter. 
The JSON Validator ops to Douglas Crockford of JSON and JS Lint and Ber af jsonval. 
books": [ 
{ 


"pubdate": "06/2000" 
“isbn": "0767903820". 


"title": "Open: An Ce 
ato MAndre Agassi" 
"category": "Biography", 
"pubdate": "11/2009", 

"isbn": "0307268198" 


"title": "The Art of the Start: The Time-Tested, Battle-Hardened Guide for Anyone Starting poe 
*author* "Guy Kawasaki" 


c 
Validate 


FAQ 


Results 


图 9-14 Douglas Crockford 的 JSONLint 验 证 工具 
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使 用 前 面 例子 中 的 JSON 人 代码， 我 们 使 用 jQuery 通过 Ajax 请 求 载 和 人 JSON 数 据 ， 接 着 像 在 页 面 
上 解析 HTMIL 那样 解析 JSON 数 据 ( 参见 图 9-15 ), "我 们 将 使 用 .ajax() 方 法 , 不 过 你 也 可 以 使 用 
快捷 方法 $ .getJSON () o 
使 用 jQuery 获取 JSON 数 据 和 获取 XML 数据 非常 相似 , 由 于 JavaScript 原 生 支持 JSON 数 据 ， 
此 只 需要 更 少 的 步 又 ， 这 使 得 JSON 成 为 一 个 性 能 更 好 的 XML 替代 品 。 
这 个 脚本 最 终 的 运行 结果 是 一 个 包含 我 最 喜欢 的 $ 本 书 的 无 序列 表 ， 如 图 9-12 所 示 。 
(1) 首先 ， 我 们 需要 准备 存放 书籍 无 序列 表 的 HTML。 创 建 一 个 无 序列 表 u1l#books。 


<h1>My Favorite Books</h1> 
<ul id="books"> 
</ul> 


(2) 接着 调用 $s .ajax:() 方 法 并 提供 4 个 参数 : type 人 参数 代表 请 求 类 型 ， 我 们 在 这 里 使 用 GET 
方式 ; dataType 参 数 是 JSON; ur1 人 参数 是 favoritebooks .json; 回调 函数 是 parseJSsoN， 我 们 
将 会 在 下 一 个 步骤 创建 这 个 函数 。 


$.ajax(( 


(D XML 的 解析 类 似 HIML，JSON 解 析 与 HTML 完 全 不 同 ， 作 者 此 处 的 描述 有 误 。 
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type: "GET", 

dataType: "JSON", 

url: "favoritebooks.json", 
success: processJSON 

1); 


— jQuery Ajax JSON 


(*) > QC) CX) (f) QLI hip://smashingiquery.com/code/chap09/ajax-readjosn.html Yr v) QE Coogle Q) mw 


© Disable + Æ Cookies + J CSS + ©] Forms + [EE Images + @ Information + | / Miscellaneous + ./ Outline + Žž Resize + gP Tools + {2] View Source * J> Options 


L D jQuery Ajax JSON t 


My Favorite Books 


Title: I'm a Stranger Here Myself: Notes on Returning to America After 
20 Years Away 

Author: Bill Bryson 

Travel - 06/2000 


‘Title: Open: An Autobiography 
Author: Andre Agassi 
Biography - 11/2009 e 
‘Title: The Art of the Start: The Time-Tested, Battle-Hardened Guide for 
Anyone Starting Anything 

Author: Guy Kawasaki 

Business - 09/2004 

Title: Founders at Work: Stories of Startups’ Early Days 

Author: Jessica Livingston 

Business - 09/2009 

Title: Getting Real: The smarter, faster, easier way to build a successful 
web application 

Author: Jason Fried 

Business - 09/2009 


+ E Console HTML CSS Script DOM Netv  PageSpeed Page Speed Activity YSlow ( LIE 
id Clear Persist (£T HTML CSS JS XHR Images Flash 

URL | Status | Domain | Size | Timeline 

P GET ajax-readjosn.html 。 304 Not Modified — smashingjquery.com 9728 | Mu) 162ms 

> GET jquery.minjs 304 Not Modified ^ ajax.googleapis.com 24.1 KB B ums 

Y GET favoritebooksjs 304 Not Modified ^ smashingjquery.com 969 B BN 55: 


Headers Response Cache JSON 


a Stranger Here Myself: Notes on Returning to America After 20 Years Away", 
Bryson", 
1", 


Al9-15 ”得 到 JSON 数 据 生成 HTML 并 显示 在 页 面 上 


E Done enna # BA 25.6« 05995 | 


了 


(3) 编写 一 个 空白 的 回调 函数 parseJSON。 它 有 一 个 参数 qata， 代 表 收 到 的 JSON 数 据 。 


function processJSON(data) { 
} 


(4) 在 parse JSON 函 数 内 使 用 $ .each() 方 法 创建 一 个 循环 ， 遍 历 data .books 对 象 字 面 量 中 


的 数据 。i 是 数组 的 索引 ，item 则 是 相应 的 值 。 


function processJSON (data) { 
$.each(data.books, function(i,item) { 
Jy 

} 


(5) 在 $.each() 方 法 内 ?”,， 使 用 $ ('<1i></1i>') 动 态 生 成 一 个 1i 元 素 ， 然 后 使 用 .html () 
方法 , 把 由 标签 字符 串 和 变量 拼接 而 成 的 HTML 内 容纳 入 这 个 1i 元 素 , 之 后 把 它 追 加 到 ul#books 
中 去 。 我 们 使 用 item 和 键 ( 名字 ) 访问 对 应 的 值 ( 数据 )， 比 如 标题 对 应 item.title。 与 XML 


相 比 ， 这 是 一 大 优点 : 我 们 不 必 创建 中 间 变 量 就 能 直接 访问 数据 项 。 


CD 严格 来 说 此 处 是 指 $.each() 的 回调 函数 内 。 
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function DrocessJSON (data) { 
$.each(data.books, function(i,item) { 
$('«li»«/li»').html('«b»Title:«/b» '«item.title +'</br><b>Author</b>: 
'+ item.author +'</br>'+item.category +' - '+item.pubdate) .appendTo('#books') ; 
1); 
H 


两 个 解决 方案 的 最 终结 果 相 同 ， 而 JSON 方 案 使 用 更 少 的 步 又， 处理 数据 更 快 。 生 成 JSON 代 
码 需要 一 点 点 技巧 ， 因 为 它 有 着 严格 的 语法 : 一 个 多 余 的 逗号 或 大 括号 ， 就 会 让 JSON 数 据 彻底 
失效 。 


9.8 使 用 Delicious API 接收 JSONP 数据 以 创建 Delicious 用 户 组 件 


Delicious ( www.delicious.com， 参 见 图 9-16)， 是 一 家 专注 分 享 与 发 现 Web 书 签 的 社交 站 点 。 
在 这 家 网 站 上 我 们 可 以 收藏 自己 喜欢 的 站 点 并 查看 别人 的 收藏 。Delicious 站 点 发 布 于 2003 年 9 月 , 
并 于 2005 年 卖 给 雅虎 。 这 个 站 点 的 用 户 超过 530 万 ,一 共 收 藏 了 超过 1.8 亿 个 书签 。 我 曾经 用 过 
Delicious 好 几 年 ， 通过 它 了 解 人 们 喜欢 什么 链接 :什么 链接 有 用 。 它 支持 通过 任意 一 台 联 网 的 计 
算 机 访问 自己 的 书签 ， 它 还 是 一 个 发 布 自己 项 目的 好 地 方 ， 能 传播 自己 的 项 目 赢得 更 多 的 流量 。 
Delicious 针 对 许多 浏览 器 开发 了 书签 插件 ， 无 需 访问 Delicious 站 点 就 能 随时 保存 书签 ， 这 为 人 们 
带 来 了 极 大 的 方便 。 这 也 是 该 应 用 如 此 流行 的 一 个 原因 。 


Delicious 


(4 > (GC) Cx ) GA) Cu htp://www.delicious.com/ iu v) GM cooale Qa) isi 
@ Disable + Æ Cookies * 1] CSS + =] Forms + 可 Images + @ Information + |. Miscellaneous * .,/ Outline + 72 Resize * PF Tools + [;) View Source * “> Options 
a" Delicious F 


delicious 
social bookmarking 


All your stuff in one place. 
Get to your bookmarks from any computer, anytime, anywhere. 


@ Learn More 


Search the biggest collection of bookmarks in the universe... Search Delicious = 


| Fresh Bookmarks — N N 


The freshest bookmarks that are flying like hotcakes on Delicious and beyond. 
See more recent bookmarks o 000 


w= -机 Lifehacker- Windows 7 May Run Better than You Think on Older Hardware - 日 
= windows 7 save 
^ ctim via lifehacker.com 


> 13 Related Tweets 


T. ' U.S. Bails Out Major Credit Unions - WSJ.com save H 
via online.wsj.com 
credit unions 


7 Related Tweets 


alternative OS toread windows microsoft-windows-7 


i; Done + Wa Ysiow 
©2010, Yahoo! 


9-16 ”著名 社交 书签 站 点 Delicious 
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就 像 许多 在 线 社交 网 站 和 应 用 一 样 ，Delicious 有 着 了 不 起 的 开发 者 社区 和 API C 应 用 编程 接 
口 )。Delicious 几 乎 对 每 个 页 面 都 支持 RSS ( 简单 内 容 聚 合 ) 订阅 源 (参见 图 9-17 )， 包 括 最 流行 
的 书签 页 和 每 个 人 自己 的 书签 页 。RSS 订 阅 源 基于 XML 标准 生成 。 


@É Grab File Edit Capture Window Help mon © $ Q4 206) Sat5:47PM Q 
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10 Twitterific Twitter Tools save E 
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图 9-17 Delicious RSS 订阅 源 


Delicious 也 提供 API 接 口 , 供 那些 希望 在 自己 的 网 站 和 移动 应 用 中 使 用 Delicious API 的 高 级 用 
户 使 用 (参见 图 9-18 )。 通 过 这 一 API, 我 们 能 够 提交 内 容 到 Delicious， 也 能 够 〈 在 自己 的 应 用 中 ) 
显示 从 Delicious 获 取 的 内 容 。 要 实现 这 些 必 须 得 到 API key 形 式 的 授权 。 

在 下 面 的 教程 中 ， 我 将 使 用 Delicious 订 阅 源 。Delicious 站 点 提供 XML 订阅 源 和 JSON 订 阅 源 。 
我 们 可 以 使 用 查询 字符 串 参 数 获取 特定 的 内 容 ， 但 无 法 通过 订阅 源 添 加 任何 内 容 到 Delicious 。 我 
们 可 以 参阅 Delicious 站 点 上 的 文档 查看 查询 参数 的 完整 列表 ， 也 可 以 查看 图 9-19。 

使 用 我 的 用 户 名 jakerutter 作 为 URL 中 查询 字符 串 的 查询 参数 ( http:/feeds.delicious. 
com/v2/json/jakerutter?count-10 )， 能 够 获取 我 添加 到 Delicious 的 最 新 10 个 书签 (参见 图 9-20 )。 每 
位 用 户 都 有 一 个 订阅 源 ， 我 们 可 通过 关注 朋友 的 订阅 源 查看 他 们 创建 的 所 有 书签 。 

在 这 个 解决 方案 中 ， 我 们 编写 一 个 My Delicions Feed (我 喜欢 的 书签 ) 组 件 。 可 以 把 它 放 到 
自己 的 站 点 上 , 或 者 任何 其 他 使 用 了 jQuery 的 站 点 上 (参见 图 9-21 )。 这 个 教程 用 到 了 JSONP (C xc 
持 填充 的 JSON ) 技术 ， 这 是 实现 跨 域 Ajax 调 用 必 不 可 少 的 技术 。JSONP 通 过 把 返回 的 JSON 数 据 
包装 在 你 指定 的 回调 函数 中 实现 跨 域 调用 。 没 有 JSONP ， 跨 域 调用 就 会 失败 。 我 们 无 法 使 用 那些 
不 支持 JSONP 请 求 的 API。 
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e200 delicious/help/api 
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Read/write access to your Delicious bookmarks and tags via an HTTP-based 
interface 


This document and the APIs herein are subject to change at any time. Sorry, the API is still under development. We will 
version the API, but may deprecate early versions aggressively. ey 


Authentication 
* All/V1 apis require https requests and HTTP-Auth. 
* To access data from accounts created using a Yahoo! ID, use the same API's as below, but change the path to /v2, 
and make HTTP requests using OAuth as provided by the Yahoo! Developer Network. 
* For more information on OAuth and its usage with Delicious, see our step by step example. 


Keep in Mind 

1. Please let us know if you are going to release software that uses this publicly, so that we can at least have a 
heads-up and hopefully test things out beforehand. 

2. Please wait AT LEAST ONE SECOND between queries, or you are likely to get automatically throttled. If you are 
releasing a library to access the API, you MUST do this. 

3. Please watch for 500 or 999 errors and back-off appropriately. It means that you have been throttled. 

4. Please set your User-Agent to something identifiable. The default identifiers like "Java/1.4.3" or "iwp-perr etc tend 
to get banned from time to time. 

5. If you are releasing software or a service for other people to use, your software or service MUST NOT add any links 
without a user's explicit direction. Likewise, you MUST NOT modify any uris except under the user's explicit 


direction. 
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图 9-18 Delicious API 文 档 
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p | Feeds 
Delicious data feeds for news readers and third-party applications 


What are feeds at Delicious? 


For most pages within Delicious, there are associated read-only data feeds for bookmarks and other information 
displayed in a browser. These feeds come in several formats — including RSS and JSON — and offer windows onto 
what's going on at Delicious that you can use in news readers, blogs, or your own third-party applications. m 


What is RSS? 


RSS is a format used by many news sites and blogs to publish content on the web. Using RSS to publish content 
enables news readers and personalized start pages to pull new stuff all into one place. Applications that understand 
RSS can do the footwork and provide a one-stop shop to help readers keep on top of things without needing to surf all 
over the web in person. 


Accordingly, Delicious offers links to companion RSS feeds on most pages to help you keep track of bookmarks from 
other people and on interesting topics. Look for the orange RSS icon BJ at the bottom of each page. 


In addition, many web browsers — such as Firefox, Safari, and Internet Explorer — automatically detect RSS feeds 
associated with pages and offer convenient ways to subscribe. 


What is JSON? 


JSON, which stands for JavaScript Object Notation, is a lightweight data-interchange format easily used in 
browser-based mashups, blog badges, and other scenarios including server-side and desktop applications. 


You can use feeds at Delicious in JSON format to fetch, remix, and mashup a variety of data for use in your own 
custom applications and browser-based hacks. 


Anote on freshness 


IE Done # Wa ysiow 
©2010, Yahoo! 


19-19 Delicious 订阅 源 文档 
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ii feeds.delicious.com/v2/json X 
€ C fi | © feeds.delicious.com/v2/json /jakerutter?count- 10 53 aomugooss 


[("u" : "http: \/\/www.mtv.com\/news\/articles\/1629326\/20100108\/vampire_weekend.jhtml","d":"Vampire Weekend's 'MTV Unplugged': 
Watch It Here! - Music, Celebrity, Artist News | MTV","t":["vampire","weekend"], "dt":"2010-09- 
24703:56:002","n":"","a":"jakerutter"},{"u":"http:\/\/developer.yahoo.com\/performance\/rules.html","d":"Best Practices for 
Speeding Up Your Web Site","t":["speed", "web", "Web Tools", "yahoo" ], "dt":"2010-09- 

24702:56:10Z","n":"","a":"jakerutter"), ("u":"http: V/V /open.blogs.nytimes.comV/","d":"Code - Open Blog - 
NYTimes.con","t":["open", "source", "nyt", "jquery"], "dt" :"2010-09- 
23703:27:492","n":"","a":"jakerutter"),("u":"http: V/V /www.programmableweb.comM/","d":"ProgrammableWeb - Mashups, APIs, and the 
Web as Platforn","t":["api","jquery","javascript"],"dt":"2010-09- 
23702:23:002","n":"","a":"jakerutter"},{"u":"http:\/\/jquerymobile.com\/","d":"jQuery Mobile | jQuery 

Mobile","t":["jquery", "mobile", "javascript", "safari", "iphone", "android"],"dt":"2010-09- 

23702:16:282","n":"","a":"jakerutter"), ("u" : "http: V/V/typekit.comV/", "d" : " Typekit","t":["web", "fonts", "adobe", "typekit","css", 
"html", "javascript"],"dt":"2010-09- E 
23701:29:272","n":"","a":"jakerutter"), ("u":"http: V/V /www. smashingmagazine.comV/", "d": "Smashing 

Magazine","t":[" jquery" , "javascript", "web", "design", "development ,","blog_setup_designs"],“dt":"2010-09- 

23701:07:072 * ," jakerutter"),(*u":"http: V/A/ejohn.orgV/blogV/javascript-micro-templatingV/", d':"John Resig = 
JavaScript Micro-Templating","t":["jquery wascript","template"],"dt":"2010-09- 
23700:30:182","n":"","a":"jakerutter"},{"u":"http:\/\/www.wsjwine.com\/index. ?","d":"WSJwine from The Wall Street Journal 
| wine club offers, exclusive wines, buy wine online, home delivery, wine reviewa","t":["wine", "wsjwine"],"dt":"2010-09- 
23700:29:162","n":"","a":"jakerutter"},{"u":"http:\/\/pxtoem.com\/","d":"PXtoEM.com: PX to EM conversion made 
simple.","t":["Web ' mooln" "tools, S designs" ,"en,", "px, " ,"conversion,","web,", "development, "],"dt":"2008-12- 
31719:23:482","n":"","a":"jakerutter"}] 


图 9-20 ”我 的 书签 JSON 订 阅 源 


000 jQuery Ajax NyTimes © 
e» Dy (AD) (a (@) CD http://smashingjquery.com/code/chap09/ajax-deliciouswidget.html Ww v Y (QM Google 


@ Disable + Æ Cookies + 器 CSS * =] Forms +» S Images * @ Information * |) Miscellaneous + .7 Outline + 22 


Resize » J” Tools * [i] View Source + DS Options 


PXtoEM.com: PX to EM conversion 


nd 


Best Practices for S; 
Your Web Site 


Code - -NYTimes.com 


Web- 
APIs, and the Web as Platform 


Aw Console HTML CSS Script DOM Netv | Verre peperere uen C jooo 
i © Clear Persist :CW HTML CSS JS XHR 


Images Flash 


> GET ajax-deliciouswidg 200 OK smashingjquery.com 1.5 KB 
> GET delicious 32.png 304 Not Modified 。 smashingjquery.com 1.4 KB 
Y GET jakerutter?count=1 — 2000K feeds.delicious.com 879 B 


Params Headers Response Cache JSON 


jsonp1285451447110([{"u": "http: \/\/www .mtv.com\/news\/articles\/1629326\/20100108\/vampire_weekend. jhtmi" 

1 "a": "Vampire Weekend's 'MTV Unplugged’: Watch It Here! - Music, Celebrity, Artist News | MIV","t":("vampire” 
7" "a": "jakerutter"),{"u": "http: \/\/dev loper.yahoo. com\ 

"web", "Web_Tools" 
imes.com 

"t": ["open", "source", "nyt", "jquery"], "dt": *2010-09-23703:27 

1491", "57:7", "a" i Sakerutter"), {"u" ; "http: \/\/wuw-programmablaveb.com\/", "d": ProgrammableWeb — Mashups 


图 9-21 动画 Delicious 书 签 组 件 
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(1) 下 面 这 些 CSS 控 制 组 件 在 页 面 上 的 布局 。 我 们 可 以 在 jQuery 编程 之 前 先 写 好 所 有 的 CSS ， 
也 可 以 先 打造 一 个 大 概 的 基础 ， 然 后 边 写 程序 边 改 样式 。 下 面 的 CSS 示 例 代码 包括 一 些 Mozilla 
Firefox] V 4s FllSafari WebKit 专 用 的 圆 角 样式 ， 其 他 浏览 器 只 能 通过 border 属 性 看 到 直角 效果 。 

body { 


font-family:georgia; 
font-size:12px; 


} 

.widget { 
border:1px solid #1179CB; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
width: 200px; 

} 

.widget h1{ 
font:14px georgia; 
padding: 5px; 
color:#fff; 
background: #1179CB url (images/delicious_32.png) 2px 5px no-repeat; 
text-indent:20px; 
height:20px; 
margin:0; 

} 

#user-feed{ 
list-style-type:none; 
margin:0; 
padding: 0; } 

#user-feed li( 
padding: 5px; 

H 

at 
color:#1179CB; 

} 


(2) 准备 包含 书签 无 序列 表 的 HTML 组 件 代 码 。 在 其 中 添加 一 个 无 序列 表 ul#news-feed。 


<div class="widget"> 
<hi>My Delicious Feed</h1> 
<ul id="news-feed"></ul> 


</div> 
(3) 创建 变量 query， 并 把 它 的 值 设置 为 我 的 Delicious 订 阅 源 URL: 
var query = "http://feeds.delicious.com/v2/json/jakerutter?count=10"; 


(4) 接着 调用 $ ajax () 方 法 并 提供 4 个 参数 : type 参 数 使 用 cET; dataType 参 数 是 JSONP; 
ur1 人 参数 是 变量 auery; 回调 丽 数 是 processData: 


$.ajax({ 
type: "GET", 
dataType: "jsonp", 
url: query, 
success: processData 
oe 
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(5) 编写 一 个 空白 的 回调 函数 processData。 它 有 一 个 参数 aata， 代 表 收 到 的 JSON 数 据 。 
function processData(data) { 
} 
(6) 使 用 $ .each() 方 法 创建 一 个 循环 ,遍历 gata 中 的 数据 。i 是 数组 的 索引 ，item 则 是 相应 
的 值 : 
function processData(data) { 
$.each(data, function(i, item) { 


ljg 
} 


(7) 在 $.each () 方 法 内 ， 使 用 $('<1i></1Li>') 动 态 生 成 一 个 11 元 素 ， 然 后 使 用 .html () 方 
法 ， 把 一 个 a 标签 纳入 1i 元 素 , 之 后 把 它 追 加 到 ul#news-feed 中 去 。 在 每 个 a 标签 中 ，URL 和 标 
题 均 使 用 item 和 键 ( 的 名 字 ) 来 访问 相应 的 值 (数据 )， 在 本 例 中 .u 是 URL，.d 是 标题 。 
function processData(data) { 


$.each(data, function(i, item) ( 
$('«li»«/li»').html("«a href='"+item.u+"'>"+item.d+"</a>") .appendTo 


('#user-feed'); 
12$ 
} 


(8) 新 建 变量 newsInterval， 并 将 它 的 值 设 置 为 2000 ms， 它 的 值 是 刷新 My Delicious Feed 
组 件 的 时 间 间 隔 。 

var newsInterval = 2000; 

abes 我 新 建 一 个 函数 slidqearticle()， 它 负责 Delicious 书 签 组 件 的 所 有 特效 。 该 函 
数 的 第 语句 选中 ulL#news-feeq 的 最 后 一 项 ， 克 隆 它 ， 然 后 使 用 .prepenaTo () 方 法 将 它 添 
ee 第 二 条 语句 选中 ul#news-feed 的 第 一 项 ， 然 后 调用 .sligdeDown () 方 法 实 
现 滑 入 效果 。 我 想 让 这 个 元 素 在 500 ms 的 时 间 内 渐渐 滑 入 ， 而 且 还 希 望 它 在 1000 ms 的 时 间 内 淡 
和 人。 通过 在 同一 条 语句 中 链 式 调用 .fadeIn() 方 法 和 .slideDown () 方 法 ,我 实现 了 预期 效果 。 
slideArticle 了 水 数 的 最 后 一 条 语句 用 于 移 除 列表 的 最 后 一 项 。 这 3 条 语句 顺序 执行 , 极 佳 地 模拟 
了 淡 入 及 滑动 效果 。 


function slideArticle() { 
S('#user-feed li:last').clone() .prependTo('#news-feed').css('display','none'); 
S('#user-feed li:first') .fadeIn(1000) .slideDown (500) ; 
S('#user-feed li:last').fadeOut().remove(); 


} 

(10) 最 后 一 段 JavaScript 代 码 可 以 说 是 最 重要 的 。 我 需要 设置 setInterval 函 数 ， 以 便 每 隔 
newsInterval (2000 ms ) 就 执行 slidqearticle 一 次 。 这 个 函数 一 直 循 环 不 停 。 没 有 这 个 函数 ， 
Delicious 书 签 组 件 就 无 法 运行 。 


setInterval(slideArticle, newsInterval) ; 
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9.9 使 用 JSONP 和 Yelp API 创建 一 个 Yelp 最 热点 评 组 件 


Yelp (www.yelp.com ) 网 站 成 立 于 2004 年 ， 提 供 类 似 “ 大 众 点 评 ”" 的 本 地 搜索 及 点 评 服务 。 
这 一 网 站 提供 本 地 商务 (从 餐饮 到 书店 ， 几 乎 无 所 不 包 ) 点 评 及 评级 (参见 图 9-22 )。 那 些 体验 
过 这 些 企业 服务 水 平 的 当地 顾客 们 , 不断 在 这 个 在 线 社区 留 下 反馈 信息 ,为 该 社区 带 来 价值 。 到 
了 2007 年 ，Yelp 改 进 了 站 点 ， 为 开发 者 提供 API 以 便 他 们 创建 基于 Yelp 数 据 的 应 用 程序 ， 这 极 大 
地 提高 了 Yelp 点 评 的 覆盖 面 。 


Yelp | Search Businesses In Chicago 
»)-( ) Gx) ( ) Cds. hep: ‘yelp. ‘h?find_desc=&ns=1&find_loc=chi NW2C+il v ) QU Google Qa) i~ 
(E )- CO QO Gf). Gi p: / /www.yelp.com/search?find_desc=&ns: ind loc-chicagoX2C«.i w S uE * 


@ Disable + Æ Cookies + 1] CSS + E] Forms + S Images + @ Information + ^. Miscellaneous * 7 Outline + $2 Resize + $F Tools + {2) View Source * | Options 
|| 3: valp | Search Businesses In Chicago 


Now in the UK! Friends Activity (^) Logged in as Jake R. My Account Log Out 


Search for (e.g. taco, cheap dinner, Max's) Near (Address, Neighborhood, City, State or Zip) 


chicago, il 


Real people. Real reviews. ® 


Welcome  AboutMe Writea Review Find Reviews Invite Friends Messaging Talk Events Member Search 


a > THE INVISIBLE INVINCIBLE SIGNAL [Click To Expand v | 


Browsing Chicago Businesses 1 to 10 of 25000 - Results per page:{ 10 4 | 
Refine By: 
Active Life Event Planning & Services Hotels & Travel Pets Restaurants 
Arts & Entertainment Financial Services Local Flavor Professional Services Shopping 
Automotive Food Local Services V") Public Services & Government 
Beauty and Spas Health and Medical Mass Media Real Estate 
Education Home Services Nightlife Religious Organizations 
> Show Filters 


4 1. Inspiration Cafe OGO,8O,900 2 eviews 
Category: Community Service/Non-Profit 4554 N. Broadway St 
Neighborhood: Uptown Chicago, IL 60640 

(773) 878-0981 


n I'm biased towards this place as | worked on a project with them for one of my MBA classes. Aside from 
"€ that, you have to love what they do. They support individuals that otherwise would not have the... 


4 2. Parkview Pet Supplies BGO9O900 s 
Category: Pet Stores 5358 N Broadway St 
Neighborhood: Edgewater ‘Chicago, IL 60640 

(173) 561-0001 


m While | was dismayed to find out that my cat's favorite food was no longer carried by Parkview, | was 
very glad to hear why. While it was great stuff, the company that produced was recently purchased. 


[uz Done 
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图 9-22 Yelp 上 的 芝加哥 地 区 商业 点 评 


Yelp 文 档 站 ( www.yelp.com/developers/documentation ) 是 专 为 开发 者 社区 提供 的 文档 站 点 ， 
从 这 里 可 以 链接 到 Yelp API、 代 码 示例 、API 文 档 等 ( 参见 图 9-23 )。 这 个 文档 站 结构 合理 ， 能 
证 开发 者 使 用 正确 的 工具 使 用 这 一 公司 提供 的 API 编 写 自己 的 应 用 ， 值 得 其 他 提供 API 服 务 的 公 
司 借鉴 。 


DO “大众 点 评 ” 是 国内 的 一 家 城市 生活 消费 指南 网 站 ， 网 址 为 http:/www. dianping. com, 
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Mozilla Firefox 


( <)> ) QO Gf. @ http: / /www.yelp.com/developers /documentation wy) (Qi Coogle Q) ir 


@ Disable * Æ Cookies + 器 CSS + 问 Forms + || Images + @ Information * — Miscellaneous + -7 Outline + 22 Resize * gP Tools + [2] View Source + +» Options 
] 3: http:/ jwwwyelp...s/documentation | | 


yelp fo. DEVELOPERS 


API V1.0 Technical Overview 


sanis Note: Be sure to read through our API overview before you begin development. 


Re Users of the Yelp APIs will : 

leview Search API ls will be able to: 

Phone API * retrieve business review and rating information for a particular geographic region or location. 
ione API 


* display review information for a particular business. y] 
Neighborhood API * determine accurate neighborhood name information for a particular location. 
API v2.0 (beta) * track recent reviews for a particular business. 


Overview * display pictures of highly rated local businesses and of the top reviewers for that business. 
Authentication * determine a particular business' review and rating information based on the phone number for that business. 


Search The default output is JSON (JavaScript Object Notation). For more detalls on JSON and to obtain parsers please reference 
www json.org. 


Common API Parameters 


Errors The following parameter must be included in all API requests: 

General Required 

Neighborhood List Name DataType Required Optional Description 

Cae us sp mmg mis LE ITI LA at we ond waon 
iPhor 

RSS Optional 


FAQ Name e eil Description Potential Values 


il 
3 Ma Ysiow 
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图 9-23 ”Yelp 文 档 站 


9.9.1 申请 Yelp API Key 


在 使 用 任何 第 三 方 API 之 前 ,我 们 通常 都 需要 先 申 请 一 个 API key ( 其 些 情况 ， 如 我 们 在 前 面 
体验 的 Delicious API 是 个 例外 )。 第 三 方 站 点 通过 API key 来 监控 应 用 的 活跃 程度 : 通过 这 个 APL， 
第 三 方 服务 器 能 够 记录 我 们 应 用 的 请 求 数 和 流量 。 绝 大 多 数 API 至 多 支持 每 日 100 个 请 求 , 审批 通 
过 之 后 可 以 支持 更 多 的 请 求 及 流量 。 使 用 这 些 API 有 时 还 会 产生 费用 , 在 开始 任何 开发 工作 之 前 ， 
一 定 要 认真 了 解 这 些 API。 

对 未 得 到 批准 的 开发 项 目 , Yelp API 支 持 每 天 不 超过 100 个 请 求 。 在 项 目 正 式 上 线 并 审批 通过 
之 后 ，Yelp 放 宽 限 制 为 每 日 不 超过 10 000 个 请 求 。Yelp API 支 持 通 过 3 种 方法 依据 企业 的 类 型 、 企 
业 的 位 置 以 及 附近 的 企业 搜索 企业 ， 这 3 种 方法 是 点 评 搜 索 、 电 话 搜 索 及 附近 搜索 。 

审批 过 程 包括 提 交 一 个 描述 应 用 用 途 以 及 应 用 如 何 使 用 Yelp API 的 简单 表单 ,提交 申请 之 后 ， 
你 会 收 到 一 封 来 自 Yelp 的 电子 邮件 ， 分 配给 你 一 个 账号 管理 员 ， 他 负责 审核 你 的 应 用 并 最 终 通过 
或 者 拒绝 你 的 项 目 。 当 把 Yelp API 整 合 到 项 目 之 后 ，Yelp 还 会 为 你 的 项 目 通过 Yelp 的 认证 提供 帮 
助 。 我 将 在 下 面 的 解决 方案 中 讲解 这 个 过 程 。 

(1) 在 申请 Yelp API Key 之 前 ， 需 要 先 有 一 个 Yelp 普 通 账号 ， 获 取 方 法 是 访问 www.yelp.com/ 
ignup ( 参见 图 9-24 ) 并 提供 特定 信息 ( 基本 上 就 是 出 生日 期 、 电 子 邮 件 地 址 等 )。 

(2) 有 了 一 个 Yelp 账 号 之 后 ， 需 要 登录 图 9-25 所 示 的 Yelp 开 发 者 网 站 ,或 者 访问 www.yelp 
com/login?return url=%2Fdevelopers%2Fgetting started?o2Fapi access. 
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eoo Sign Up | Yelp. e 


GD: © GO) GB) C vos w yep com]signun XY) Gi coosie a) isi: 


@ Disable » & Cookies + L] CSS + =] Forms + M Images + @ Information + 3 Miscellaneous + / Outline » 5 Resize + gP Tools + [i] View Source * +> Options 


velba 


* Sign Up | Yelp 


Real people. Real reviews. © 


Create Your Yelp Profile Yelp is the place where you can 


First Name: | AS — Subscr 
p Reviewers! 
Password: 
Retype Password: o 
Zip Code: Already a Yelp Member? Hey, come on in 

Email Address | 
Country: United States — : . E 

'asswoi 

Gender: O Male O Female Forgot your password? 
(Optional) 


seem [2 Sei) 3) 


By clicking the button below, you agree to the Yelp Terms of Service and Privacy Policy. 


Done 8 là vstow 
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图 9-24 ” Yelp 注册 账号 页 


00o Log In | Yelp B 


Q- (©) QO Gf). 人 hps: /www.velp.com/login?return urlX2FdevelopersX2Fgetting s v; Y ) (Gs Coogle Q) ir 


@ Disable + Æ Cookies + L CSS + ©] Forms + $ Images + @ Information + ^. Miscellaneous * ./ Outline + 22 Resize + gP Tools + [:] View Source * Options 


SEE: 


x Log In | Yelp. 


Real people. Real reviews. © 


Log In No Account Yet? 
Please enter your email address and password to log in. That's okay, we still love you. 


Email Address [ Sign Up 


Yelp is the fun and easy way to find, review and talk about what's great - 


Password | and not so great - in your local area. It's about real people giving their 
honest and personal opinions on everything from restaurants and spas to 
coffee shops and bars. 
Log In 
T 
About. m nep = wa - Cantin - Language. 
About Yelp FAQ Careers Canada English - 
Yelp Blog Contact Us Yelp Mobile France 
Press Business Owners. The Weekly Yelp. Germany 
Terms of Service. Developers RSS Ireland 
Privacy Policy Top Searches UK 
Copyright © 2004-2010 Yelp 
Done B BB vstow 


由 yelp.com 许 可 复制 
图 9-25 Yelp 开 发 者 登录 页 
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(3) 成 功 登 录 开 发 者 网 站 之 后 ,我 们 需要 访问 位 于 www.yelp.com/developers/getting tarted/api_ 
access 的 API 访 问 页 面 ( 即 “API _ Access” 页面 ， 参 见 图 9-26 )。 


Getting Started | Yelp for Developers 


(4) &)- CGU) (3X) GA) Gal http://www.yelp.com/developers/getting started/api access TY) Gi Googie Q) ir 
© Disable + Æ Cookies + L] CSS + ©] Forms + (E| Images * @ Information + ©? Miscellaneous + 7 Outline + 22 Resize * gP Tools + EE] View Source * {> Options 
| 4 Getting Started | Yelp for Develop... JEP = 
SO for DEVELOPERS Logged in as Jake R. | Get API Access | Sign Out 
(RR Documentation Examples Yelp Home 
API Overview API Access 
paper Complete the following form to gain access to the Yelp API 
Display Requirements Nour websti Ut 四 
API Terms Of Use 
How you will use the API: 
Industry: | Select an Industry +} 
C I have read and accepted the Yelp API Terms of Use 
(Submit ) 
Examples | FAQ | Support | Branding Requirements | Terms Of Use 
Yelp Home | Business Owner's Guide | My Account | About Yelp | Yelp Mobile 
[EZ Done # Wa Ysiow 


由 yelp.com 许 可 复制 
图 9-26 Yelp API 申 请 访问 权限 页 


在 注册 访问 API 时 ， 需 要 填写 自己 的 站 点 URL 并 描述 将 如 何 使 用 Yelp API。 在 得 到 访问 API 
的 授权 之 后 ， 你 会 收 到 几 封 来 自 Yelp 的 邮件 ， 指 导 你 使 用 Yelp API 等 。 当 应 用 开发 完成 之 后 ， 需 
要 在 Yelp 上 展示 你 的 应 用 给 分 配给 你 的 账号 管理 员 , 请 他 审核 并 批准 应 用 上 线 。 他 们 通常 会 检查 
你 的 应 用 是 否 使 用 了 Yelp 的 Logo 以 及 是 否 清楚 地 显示 了 必要 的 信息 (一 些 术 语 和 约束 条 件 , 你 在 
注册 API 申 请 时 同意 过 的 那些 东西 )。 


9.9.2 ”使 用 Yelp API 基 于 电话 号 码 获 取 点 评 


StamfordCTGuide.com 是 我 创建 并 管理 的 一 个 Web 一 个 项 目 。 这 是 位 于 康涅狄格 州 Stamford 的 
一 家 本 地 在 线 指南 网 站 ， 有 350 多 个 页 面 ， 由 我 和 妻子 共同 管理 。 

StamfordCTGuide.com 站 点 是 在 WordPress (一 个 著名 的 博客 及 内 容 管理 系统 服务 平台 ) EF 
发 的 ， 使 用 了 一 个 支持 用 户 点 评 餐 馆 的 WordPress 插 件 。 我 们 这 个 小 小 的 站 点 还 不 能 吸引 大 量 的 
点 评 ， 而 Yelp 上 有 着 大 量 的 信誉 点 评 及 评级 内 容 。 在 通读 过 Yelp 的 文档 后 ， 我 决定 整合 Yelp 和 
StamfordCTGuide.com， 以 便 为 我 站 点 上 列 出 的 每 一 家 餐馆 导入 Yelp 上 的 点 评 (参见 图 9-27 )。 

我 在 前 面 提 到 过 ，Yelp 提 供 了 不 少 API: Review Search ( 点 评 搜索 ), Phone ( 电话 搜索 ) 及 
Neighborhood ( 附近 搜索 ), 我 对 Review Search 和 Phone Search 特 别 感 兴趣 。StamfordCTGuide.com 
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上 列 出 的 每 一 家 餐馆 都 有 街道 地 址 及 联系 电话 。 我 首先 使 用 Review Search API 并 用 URL http:// 
pi.yelp.com/business_review_search?location=650%20Mission%20St%2ASan%20Francisco%2A%20 
CA&ywsid-XXXXXXXXXXXXXXXX 尝试 传人 餐馆 地 址 数据 给 这 个 人 URL， 以 便 得 到 点 评 列表 。 
我 遇 到 的 一 个 问题 是 Review Search API 并 非 总 是 返回 一 条 结果 , 绝 大 多 数 情 况 下 都 会 返回 多 条 结 
AR (参见 图 9-28 )。 


Cosi | Stamford CT Guide Restaurants, Nightlife, Attractions, Shopping, Events, Hotels, Real Estate 


(4 > CED Cox) GA) CO http://www.stamfordctguide.com/restaurants/cosi.html Ei v) Gx coooe Q) iw 
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I [ Cosi | Stamford CT Guide Restaur.. 


ao 
2 reviews from Yelp.com 
Posted by Elizabeth P. on 2010-06-29via Yelp.com 
This branch of the chain is a very acceptable place for lunch with very moderate prices. The interior is rather 
large and attractive enough, although It can... 


Read the full review 
MN 
yelp** 


Posted by Jeff C. on 2010-08-04via Yelp.com 

Although much larger than the other Cosi across town, it does not have that cozy feel that | get at other 
locations I have been to. Located right off the... 

Read the full review 


yelp 
StamfordCTGuide User Reviews for Cosi 


Reviewed by aerutter on February 4th, 2008 9:31 pm 


Food is fresh and it's quick if you're in a rush. Good for lunch. Hes edodton of seed; ie 
and the bread is the best part. Although it's hard to resist the tempting s' 


kkk 
ona eee 
drininine 


E Done 
由 yelp.com 许 可 复制 


图 9-27 在 StamfordCTGuide.com 上 整合 了 Yelp 的 内 容 


测试 一 番 之 后 , 我 发 现 原来 这 是 因为 我 提交 给 Yelp 网 站 的 地 址 不 规范 造成 的 。 我 提交 的 数据 
并 非 总 是 包括 邮政 编码 和 正确 的 街道 地 址 ， 而 Yelp API 使 用 地 址 匹配 点 评 。 如 果 提 供 的 并 非 完 
整地 址 ，API 就 很 难 精确 匹配 。 有 些 API 调 用 返回 一 条 结果 ， 而 其 他 的 则 返回 5 条 。 这 条 路 看 来 
走 不 通 。 

还 剩 下 一 个 选择 ， 那 就 是 使 用 Phone Search API 来 尝试 匹配 那些 同时 存在 于 我 的 站 点 和 Yelp 
站 点 的 那些 餐馆 。 查阅 过 我 的 餐馆 数据 库 之 后 , 我 发 现 登 记 有 电话 号 码 的 餐馆 数量 远大 于 登记 有 

完整 地 址 的 餐馆 。 使 用 Yelp 的 Phone Search 应 该 能 得 到 更 一 至 的 的 数据 匹配 。 

在 动手 编码 之 前 ， 我 尝试 着 使 用 几 个 本 地 餐馆 的 电话 号 码 发 出 请 求 ， 发 现 这 一 API 仅 返回 这 
些 电话 号 码 对 应 的 餐馆 列表 (参见 图 9-29 )。 如 果 电 话 号 码 不 匹配 ， 就 什么 也 不 返回 。 举 个 例子 ， 
我 们 可 用 这 个 URL 结 构 请 求 Phone Search API; http://api.yelp.com/phone_search? phone=1234567890 
&ywsid-XXXXXXXXXXXXXXXX, 
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eoo Mozilla Firefox 
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V GET business review sv.— 200 OK api.yelp.com 14.3 KB 1.8s 


Params Headers Response Cache JSON 


("nessage" : ("text" "OK", "code" :0, "version":"1.1.1"),"businesses":[("rating img url":"http://media2.px 
-yelpcdn.con/static/200911302578611207/i/ico/stars/stars 5.png","country code"i"US","id"i"YwbHxh cIlB8xTqdG-u6dQ" 
s_closed":false,"city":"San Francisco", "mobile url":"http://mobile.yelp.com/biz/YwbHxh cIlB8xTqdG-u6dQ" 

,"review count":92,"zip^:"94122","state":"CA","latitude":37.753653, "rating img url small':"http://media4 
"px.yelpcdn.com/static/200911301949604803/i/ico/stars/stars small | 817:"1941 Noriega St" 

"address2":"# 3", "address3":"", "phone" :"4159395877", "state code"i"CA","categories":[["category filter" 
i'photographers", "search url”: "http://swww.yelp.com/starch?find_loc=1941+Noriega+St#2C+San+Prancisco+94122 
&cflt=photographers" , "name": "Photographers"}], "photo url':"http://medial.px.yelpcdn.com/bpthumb/o8YycWcpcgn008-sjCHsqw 
/ms", "distance" :5.1231546401977539, "name": "Wedding Photography by IQphoto", "neighborhoods": {{"url": "http 
+//www.yelp.com/search?£ind_loc=Outer+Sunset$2C+San+Prancisco#2C+CA", "name": "Outer Sunset")],"ur 
+//www.yelp.com/biz/wedding-photography-by-igphoto-san-francisco-5", "country": "USA"," i i: 
"longitude" :-122.48474400000001, "photo url small':"http://medial.px.yelpcdn.com/bpthumb/oBYycWcpegnO08-a jCHsgw 
/ss","reviews":[i"rating img url small'i"http://media4.px.yelpcdn.com/static/200911301949604803/i/ico 
/stars/stars small S.png","user photo url small':"http://medial.px.yelpcdn.com/upthumb/X0Us5i 3nR1P03i9-1 
/ss", "rating img url":"http://media2.px.yelpcdn.com/static/200911302578611207/i/ico/stars/stars 5.png" 
y"rating":5, "mobile uri":"http://mobile.yelp.com/biz/YwbHxh cIlB8xTqdG-u6dQ?srid-aPluELxBAGJgkSMXjH2a-A" 
^ "uz1" "http://www. yelp.com/biz/wedding-photography-by-iqphoto-san-francisco-Séhrid:aPluELXxBAGJgkSMXjH2a-A" 

,"user url"i"http://www.yelp.com/user details?userid-GhOYOBsklRyxZMi9FRwPLQ","text excerpt":"When my 
‘wife and I started looking for photographers for our June 20th wedding we started a year prior to our 
date. We met with a lot of photographers and "user photo url" 
/X0Us5i3mR1F05i9-EhEkHO/ms" , "date":"2010-09-24", "user name": "biswajeet "aPluELxBAGJgkSMXjH2a-A" 
),("rating img url small':"http://media3.px.yelpcdn.com/static/20091130418129184/i/ico/stars/stars small 4 
-png","user photo url small":"http://media2.px.yelpcdn.com/static/200911302819681786/i/gfx/blank user extra small 
.gif","rating_img url*:"httpi//medial.px.yelpcdn.com/static/200911304084228337/i/ico/stars/stars 4.png" 
,"rating":4, "mobile uri":"http://mobile.yelp.com/biz/YwbHxh cIlB8xTqdG-u6dQ?srid-qB0sOMIsokaR9luuonRhHA" 
^ "url": "http: //www.yelp.com/biz/wedding-photography-by-iqphoto-san-francisco-Séhrid:qBÜsOMlsokaR9luuonRhHA" 
^luser url"i"http://www.yelp.com/user details?userid-zdvlymqWFZLOQg PzfFAww","text excerpt":"one of the 
best places i've visited","user photo url":"http://medial.px.yelpcdn.com/static/200911301186834854/i 
/gfx/blank user small.gif","date":"2010-09-23","user name":"ginn p.","id":"qBOsOMIsokaR9luuonRhHA"), 
("rating img url small'i"http://media4.px.yelpcdn.com/static/200911301949604803/i/ico/stars/stars small 5 
-png","user photo url small";"http://medial.px.yelpcdn.com/upthumb/oONV535VT44 BBl3rbpHCg/ss","rating img url" 

“http: //media2.px.yelpedn.com/static/200911302578611207/i/ico/stars/stars_5.png","rating":5, "mobile uri" 
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图 9-28 点 评 搜索 结果 
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Y GET phone search?phor 200 OK 
Headers Response Cache JSON 


Params 


"kN HcZJHgG1D4V_JiLmsea" 
"is_closed":false,"city":"Stamford", "mobile url':"http://mobile.yelp.com/biz/kN ipty JiLnSeA" 
j'review count":13,"zip':"06901","state":"C7","latitude":41.054298400878899, "rating img url small':"http 
1//mediai .px.yelpcdn.con/, atic/200911301936943100/i/ico/star /stars small 2 half.png", "addressl":"131 
state code": "CT", "categori ["category filter" 
i"restaurants", "search url':"http://www.yelp.com/search?find loc-l3lsSummer*St$2C4Stamford406901&cflt 
"restaurants", "name";"Restaurants"], ("category filter":"breweries", "search url';"http://www.yelp.com 
/search?find_loc=131+Summer+St#2C+Stanford+06901écfit-breweries", "hamo"; "Breweries")],"photo url": "http 
+//medial.px.yelpcdn .com/bpthumb/PU4tJbMBNhGSmgM6KWN1AQ/ms", "distance" :0.0, "name": "Southport Brewing 
url": "http: //www.yelp.com/biz/southport-brewing-co-stamford" , "country" : "USA" 
,"avg rating":2.5,"longitude" "photo url small" /medial.px.yelpcdn.com/bpthumb 
/PU4tJbMBNhGSmgMEKwN1AQ/ss","reviews":[("rating img url small':"http://media2.px.yelpcdn.com/static/200911302337205794 
/i/ico/stara/atars small 3.png","user photo url small':"http://medial.px.yelpcdn.com/upthumb/cnE]- Gxr8gAolizc-VpIPyA 
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i"http://www.yelp.com/user details?userid-WksOkt4sdPXryez2tnLggg","text excerpt":"The mister and I choose 
this place for brunch. Our bartender/waitress was very attentive and really wonderful. They have outdoor 
t...","user photo url':"http://medial.px.yelpcdn.com/upthumb/cnE7-GxrBgAoHzc-VpIPyA 
"date":"2010-08-30","user name"i"Mrs. T.","id";"lEgKdHrykS PTTbAy2i8JQ"), ("rating img url small" 
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在 研究 了 如 何 更 好 地 把 Yelp 点 评 及 评级 API 整 合 到 stamfordCTGuide 之 后 ， 我 开始 转 和 人 下 一 
考虑 具体 实现 : 使 用 jQuery 获取 Yelp 点 评 ， 并 把 它们 导入 我 的 站 点 。 

由 于 Yelp API 与 StamfordCTGuide.com 域 名 不 同 ， 整 合 只 能 使 用 跨 域 请 求 ， 我 需要 编写 使 用 
JSONP 的 回调 函数 ， 但 这 又 引出 一 个 问题 : Yelp API v1.0 尚 不 支持 JSONP ， 不 过 我 们 可 以 解决 这 
个 问题 ， 但 替代 办 法 只 支持 获取 JSON 数 据 。 我 们 不 能 够 添加 点 评 、 评 级 等 ， 不 过 没关系 ， 因 为 
我 实现 的 这 个 版 本 尚 不 需要 这 些 功 能 。 

替代 办 法 需要 使 用 API 请 求 链 接 在 网 页 源 代 码 中 生成 一 个 script 标 签 , 该 标签 会 立刻 被 求 值 
执行 。 使 用 这 项 技术 解决 跨 域 问题 纯粹 是 因为 我 只 需要 从 Yelp 获 取 数 据 ， 这 是 一 种 单 向 通信 。 在 
页 面 加 载 成 功 之 后 ， 就 再 不 会 调用 API。 我 们 仅 在 页 面 初始 化 时 调用 API 从 Yelp 网 站 载 人 数据 。 

这 个 解决 方案 需要 综合 使 用 HTML CSS, 、jQuery 和 PHP。 我 使 用 PHP 获 取 特 定 地 址 的 电话 号 
码 并 把 它 赋 值 给 一 个 JavaScript 变 量 locPhone。 

(1) 在 页 面 上 添加 以 下 HTML， 用 它 存放 来 自 Yelp 的 点 评 数 据 。 创 建 一 个 div 并 把 它 的 ID 设 置 


为 yelpReviews。 


步 


<div id="yelpReviews" style="margin:5px;"></div> 


(2) 在 document 的 ready 事 件 处 理 函 数 中 ， 添 加 一 行 调用 writesScriptTag 消 数 的 语句 。 我 
们 将 在 下 一 步 中 定义 这 个 函数 。 我 们 给 该 函数 传 一 个 URL 参 数 ， 参数 中 包含 电话 号 码 、API Key, 
返回 结果 数 限 制 以 及 回调 函数 的 名 字 。 
$ (document) . ready (function(){ 
writeScriptTag( "http://api.yelp.com/phone_search?"+ 
"&phone="+locPhone+ 
"&ywsid=KmSrBbNWzzfSkA803RPilw"+ 
"&limit=1"+ 
"&callback=showData"); // <- callback 
ys 


(3) 8€ FRKMwritescriptTaghM. TAAN, GUEE— a yelpscript, RANEH 
它 在 页 面 加 载 完 成 之 后 生成 script 标 签 。 要 确保 标签 的 type 值 为 text/javascript， 并 且 src 属 


性 设置 为 传人 的 path 参 数 。 最 后 一 条 语句 把 这 个 script 标 签 追加 到 document 的 body 标 签 中 。 
function writeScriptTag(path) { 
var yelpScript-document.createElement('script'); 
yelpScript.type-'text/javascript'; 
yelpScript.src-path; 
$ ("body") .append(yelpScript) ; 
} 


(4) 写 一 个 空 的 回调 函数 showData， 它 接受 一 个 data 参 数 ( JSON 对 象 )。 


function showData(data) { 


} 

(5) 我 们 需要 使 用 $ © each () 方 法 创建 两 个 循环 。 第 一 个 循环 遍历 daata.businesses 对 象 , ZX 
组 索引 是 i, 对 应 的 值 是 pusiness。 第 二 个 循环 藤 套 在 第 一 个 循环 内 , 遍历 business .reviews， 
数组 的 索引 是 i， 对 应 的 值 是 review。 
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function showData(data) { 
$.each(data.businesses, function(i,business) { 
$.each(business.reviews, function(i, review) { 
Hs 
ie 
} 


(6) 在 第 一 个 循环 中 ， 我 们 可 得 到 对 企业 的 点 评 总 数 并 把 它 插入 到 页 面 中 的 #yelpReviews 
元 素 中 。 这 也 是 Yelp 网 站 的 要 求 ， 应 用 总 是 显示 点 评 总 数 并 提供 到 Yelp 网 站 上 商家 页 面 的 链接 。 
图 9-29 展 示 的 是 通过 Phone Search API 获 取 的 所 有 Yelp 数 据 。 


function showData(data) { 
$.each(data.businesses, function(i,business) { 
var bizContent = '<p><img src="' + business.rating_img_url + '" alt=""/><br> 
<a href="'+ business.url +'">'+ business.review_count + ' reviews from 
Yelp.com</a></p>'; 
$(bizContent) .appendTo('#yelpReviews'); 


$.each(business.reviews, function(i,review) { 


图 9-30 展 示 了 Yelp 网 站 上 的 响应 值 。 


Mozilla Firefox 
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Category List Response Values: 


ae This section outlines the standard response values from a "BusinessReviewSearch" operation. 
jone 


RSS Node Element Type Definition Max Number In Result Set 
r 
node that contains a list of business 
FAQ businesses list entries 1 
Support address1 node line one of business address 1 per business 
address2 node line two of business address 1 per business k 
address3 node line three of business address 1 per business 


provides a list of categories that this 


— ji business is associated with 1 per business 
categories.name Pod — del - category ow which this pounded 
Enc uid ainda, enagary on Yam unbounded 
dy node "ame of city that business is T 


located in 


distance that business is from 
distance node center point of city 1 per business 


id node Yelp Id for this business 1 per business 
latitude node latitude of business 1 per business 
longitude node longitude of business 1 per business 
mobile url node a " le business page on 1 per business 
name node name of business 1 per business 
URL to execute search for nearby 
nearby url node businoesde 1 per business 
List that provides neighborhood(s) 全 
neighborhoods list iniomaiion for businesa 1 per business 上 
E Done 3 Wà vstow Z 
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图 9-30 Yelp 网 站 上 的 响应 值 一 览 表 
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(7) 在 第 二 个 循环 中 , 我 们 将 通过 review 对 象 访 问 每 一 条 点 评 。 我 们 可 得 到 每 一 个 用 户 、 他 
们 的 点 评 URL 、 点 评 日 期 、 评 级 图 片 并 利用 索引 得 到 每 一 条 评级 摘要 。Yelp 也 要 求 在 每 一 条 Yelp 
点 评 旁 边 显示 Yelp Logo， 以 说 明 来 源 。 每 条 点 评 都 插 到 #yelpReviews 元 素 之 后 ,分 别 包 含 在 它 
们 自己 的 .comments-block 元 素 中 。 


function showData(data) { 


$.each(data.businesses, function(i,business) { 

// 附加 的 循环 

var bizContent = '<p><img src="' + business.rating_img_url + '" img=""/><br> 
<a href="'+ business.url +'">'+ business.review_count + ' reviews from 
Yelp.com</a></p>'; 

$(bizContent) .appendTo('#yelpAVG') ; 


$.each(business.reviews, function(i,review) { 


var content = '<div class="comments-block"><p>Posted by <a href="' 
review.user_url+'">' +review.user_name + ' </a> on ' + review.date 
+ 'via <a href="'+review.url+'">Yelp.com</a>'; 
content += '<p><img src="' + review.rating img url + '" img=""/><br>'; 
content += review.text_excerpt + '</p>'; 
content += '<p><a href="'+review.url + '">Read the full review</a><br>'; 


content += '<img src="http://media3.px.yelpcdn.com/static/200911302846157596/ 
/developers/yelp_logo_50x25.png"></div>'; 
$(content).insertAfter('#yelpReviews'); 
ys 
Jm 
} 


这 个 实现 真是 既 简 单 双 有 趣 ! 不 妨 想象 一 下 , 一 定 会 有 越 来 越 多 的 公司 为 他 们 网 站 数据 提供 
API, 在 那些 支持 JSON-P 请 求 的 站 点 上 , 我 们 可 以 使 用 这 些 API 并 轻松 使 用 来 自 其 他 网 站 的 内 容 ， 
却 根本 不 必要 编写 大 量 的 后 端 代 码 ， 这 一 切 都 归功 于 jQuery。 


创建 及 使 用 jQuery 插件 


除了 可 以 自己 编写 功能 强大 的 插件 扩展 jQuery 的 核心 功能 外 ，Web 设 计 师 和 开发 者 还 可 以 在 
站 点 或 应 用 程序 中 使 用 来 自 开 源 社区 的 插件 。 任 何 Web 设 计 师 或 开发 者 都 能 够 编写 jQuery 插件 ， 
但 编写 插件 需要 具备 中 高 级 JavaScript 知 识 。 

本 章 ， 我 会 带 你 了 解 如 何 安装 流行 的 jQuery 插件 ， 如 jQuery UI, jQuery Tools 和 Fancybox 
( lightbox 的 替代 品 )。 在 本 章 的 末尾 ， 我 会 介绍 如 何 编 写 及 发 布 jQuery 自 定义 插件 。 


10.1 jQuery 插件 


jQuery 插件 有 着 广泛 的 应 用 。 举 例 来 说 ， 网 站 上 的 绝 大 多 数 lightbox 窗 口 (lightbox window ) 都 
是 由 jQuery 插件 完成 的 。 在 不 离开 当前 页 面 的 前 提 下 ，lightbox 窗 口 可 以 用 来 显示 较 大 的 图 像 ， 比 如 
在 一 个 产品 目录 站 点 中 放大 显示 一 个 图 片 。 只 要 在 页 面 中 放 一 个 包 着 大 图 的 aiv 层 ， 然 后 将 它 显 示 
在 半 透 明 的 背景 上 ， 就 能 实现 这 一 功能 。 著 名 的 博客 平台 WordPress ( www.wordpress.com ) 在 其 管 
理 界面 使 用 了 一 个 lightbox 窗 口 类 型 的 插件 ， 通 过 它 给 一 篇 博客 文章 添加 媒体 文件 (参见 图 10-1 )。 


From Computer From URL Media Library 
Add media files from your computer 


Choose files to upload Select Files 


ad file size: 10MB 


图 10-1 WordPress 在 管理 界面 使 用 一 个 lightbox 窗 口 插件 为 博文 添加 图 片 文件 
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jQuery 有 着 庞大 的 插件 开发 者 社区 ， 他 们 创建 了 图 库 、 表 单 处 理 及 表单 元 素 处 理 等 被 广泛 应 
用 的 伟大 插件 。 编 写 jQuery 插件 需要 JavaScript 高 级 知识 ， 因 为 你 的 脚本 必须 能 够 部 署 、 应 用 于 很 


多 不 同 的 场合 。 
下 面 是 使 用 插件 的 一 些小 提示 。 
口 检查 该 插件 是 否 与 你 正在 使 用 的 jQuery 版 本 兼容 。 


a 检查 插件 是 否 兼 容 各 种 浏览 器 (IE、Firefox、Safari、Chrome 和 Opera )。 

口 检查 插件 的 发 布 日 期 , 如 果 该 插件 发 布 于 好 几 年 前 , 则 意味 着 这 个 插件 很 可 能 已 被 废弃 了 。 
a 阅读 插件 所 带 文档 ， 看 看 该 插件 的 实现 是 否 容易 ， 以 及 该 插件 是 否 文 持 进一步 扩展 。 

口 检查 社区 对 该 插件 的 反应 。 是 否 已 经 有 很 多 人 成 功 地 使 用 了 该 插件 ? 

口 在 使 用 插件 过 程 中 车 遇 到 问题 ， 而 该 插件 来 自 jQuery 插件 站 点 (http://plugins.jquery.com ) 


或 者 Google Code ( http://code.google.com/hosting ), 那么 你 最 好 提交 一 个 bug 报 告 ， 这样 开 


发 者 就 能 及 时 知道 这 个 问题 。 


口 如 果 插 件 已 经 明显 过 时 ( 比如 发 布 于 很 久 以 前 )， 最 好 找 找 有 没有 新 版 本 。 


10.2 ”在 站 点 上 使 用 jQuery 插件 


在 站 点 上 使 用 jQuery 插件 是 一 件 相当 简单 的 事 。 回 想 一 下 ， 你 是 怎么 将 jQuery 库 包 含 到 自己 
站 点 中 的 ? 你 只 需要 像 包 含 jQuery 库 一 样 把 所 要 用 的 插件 包含 到 页 面 中 。 记 着 插件 文件 的 包含 位 


置 应 该 在 jQuery 库 之 后 ， 否 则 它 就 不 能 工作 。 


只 要 你 愿意 , 想 包含 多 少 个 插件 都 行 。 包含 很 多 个 单独 插件 唯 


的 缺点 是 在 加 载 页 面 时 会 增 


加 对 Web 服 务 器 的 请 求 ， 这 可 能 会 导致 页 面 加载 时 间 较 长 ， 响 应 缓慢 。 图 10-2 展 示 了 Firebug 中 一 


个 页 面 加 载 多 个 jQuery 插件 的 细节 信息 。 一 个 避免 多 次 请 求 的 简单 方法 是 将 这 些 搬 件 合并 到 一 个 
文件 ( 比如 叫 jquery.plugins.js ) 中 。 这 样 ， 只 包含 这 一 个 文件 就 够 了 。 


| 369ms 


325ms 


322ms 
132ms 


图 10-2 ”Firebug 显 示 一 个 页 面 中 包含 多 个 jQuery 插件 
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10.3 在 站 点 上 包含 jQuery UI 


jQuery 有 一 个 官方 的 用 户 界面 库 jQuery UI， 见 图 10-3, 其 官方 网 站 是 jqueryui.com。 jQuery UI 


库 独 立 于 jQuery 库 并 依赖 jQuery 库 。 


jQuery UI - Home 


(4) &)- CO Cx) Gf). GGL http: /jueryui.com] wy 
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© jQuery UI - Home + 


jQuery UI provides abstractions for low-level interaction and 
animation, advanced effects and high-level, themeable 
widgets, built on top of the jQuery JavaScript Library, that 
you can use to build highly interactive web applications. 
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Tools * 好 | View Source * ,DS Options 
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Rich effects and UI widgets Powerful theme framework Flexible & easy to learn 
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Developer links 


Latest dev bundle (1.8.5) 
Fork jQuery UI on GitHub 


Google CDN for jQuery UI 
PP s E " nia VIAE Commun Development status 


© Explore the theme gallery © Get started 
© Design a custom theme © View documentation 
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图 10-3 jQuery UI 首页 


Development & planning wiki 


Books about jQuery UI 


E Wà Ysiow 


jQuery UI 库 主要 由 人 机 交互 组 件 和 一 些小 部 件 组 成 。 交 互 组 件 是 一 些 能 帮助 网 站 应 用 完成 特 


定 人 机 交互 任务 的 脚本 ， 比 如 Droppable 组 件 的 主要 功能 是 为 应 用 程序 提供 拖 放 支持 。 
表 10-1 概 要 列 出 了 jQuery UI 库 的 所 有 功能 组 件 , 本 章 后 续 几 节 将 点 评 jQuery UI 库 中 最 常用 的 


几 个 组 件 。 


3&10-1 jQuery UI 组 件 


交互 组 件 小 部 件 实用 功能 Tos 
Draggable Accordion Position Show 
Droppable Autocomplete Hide 
Resizable Button Toggle 
Selectable Date Picker 

Sortable Dialog 


Progress Bar (forms) 
Slider (forms) 
Tabs (forms) 
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小 部 件 是 一 些 自给 自足 的 部 件 。 拿 Accordion( 折 和 县 菜单 ) 部 件 来 说 ， 把 它 直 接 舱 入 到 应 用 
旦 序 中 ， 就 能 为 用 户 界 面 提 供 交 互 效 果 。 在 这 儿 ， 我 会 重点 讲 讲 如 何在 站 点 中 应 用 这 些小 部 件 。 

jQuery UI 还 提供 了 一 些 方法 扩展 jQuery 核心 事件 ， 比 如 在 事件 中 动态 地 改变 背景 或 边界 颜 
色 。jQuery Easing 搬 件 现 在 已 经 是 jQuery UI 核心 的 一 部 分 ， 这 使 得 每 个 人 都 能 为 他 们 已 有 的 动画 
增添 更 强大 的 绥 动 效果 。 

jQuery UI 主 要 用 于 因特网 富 客户 端 应 用 程序 (RIA )， 在 这 些 程序 中 ， 人 与 浏览 器 之 间 会 进 
行 大 量 的 交互 ， 所 有 的 jQuery UI 部 件 都 有 用 武之 地 。 


ira 


10.3.1 下 载 jQuery UI 


我 们 可 以 在 http:/jqueryui.com/download 下 载 jQuery UI 库 ( 图 10-4 )。 你 可 以 直接 下 载 整个 UI 
库 ， 也 可 以 使 用 Build Your Download 页 ( 自 定义 下 载 页 ) 仅 下 载 自 己 用 到 的 那 部 分 组 件 。 这 个 选 
项 非常 有 用 ， 因 为 jQuery UI 库 比 jQuery 大 很 多 ， 我 们 在 程序 中 很 少 会 用 到 库 里 所 有 的 组 件 。 


jQuery UI - Configure your download 


()5)- (e) (X) Gf). GG http: jaueryur.com/download wy) Gh E! 
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Build Your Download  , 


Customize your jQuery UI download by selecting the version and specific modules you 
need in the form below or select a quick download package. A range of current and 
historical jQuery Ul releases are also hosted on Google's CDN g 


Quick downloads: Stable (Themes) (1.8.5: for jQuery 1.3.2+) | Legacy (Themes) (1.7.3: for jQuery 1.3+) 
Components (31 of 31 selected) © Deselect all components Theme 
Select the theme you want to 
include or design a custom theme 
UI Core & core The core of jQuery UI, required for all interactions eean 
and widgets. UI lightness $ 
i S Widget The widget factory, base for all widgets » Advanced Theme Settings 
M Mouse The mouse widget, a base class for all interactions 


and widgets with heavy mouse interaction. 


Version 
Position A utility plugin for positioning elements relative to SAAE n a 
other elements. want to dawnload. 
© 1.8.5 
© Deselect all (Stable, for jQuery 1.3.2+) 
Interactions (V. Draggable Makes any element on the page draggable. 
© Droppable Generated drop targets for draggable elements. 
M Resizable Makes any element on the page resizable. 
M Selectable Makes a list of elements mouse selectable by dragging 
a box or clicking on them. 
Download 
Iz Done # MW Yslow 
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图 10-4 jQuery UI 自 定义 下 载 页 
10.3.2 ”将 jQuery UI 添加 到 站 点 


类 似 于 jQuery 库 ，jQuery UI 作为 一 个 单独 的 JavaScript 文 件 ， 也 要 上 传 到 Web 服 务 器 ， 然 后 在 
页 面 头 部 jQuery 库 之 后 加 载 。 另 外 ，Google CDN 也 提供 jQuery UI 下 载 服务 。 


«script src-"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui. 
min.js"></script> 


232 第 10 章 创建 及 使 用 jQuery 插件 


通过 Google CDN 包 含 jQuery UI 库 的 好 处 是 有 更 好 的 性 能 和 文件 缓存 ， 缺 点 是 你 不 得 不 包含 
整个 jQuery UI 库 ， 即 使 其 中 有 很 大 一 部 分 组 件 你 根本 不 需要 。 
最 终 包 含 jQuery UI 和 jQuery 库 的 页 面 头 部 会 像 下 面 这 样 


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 


10.3.3 jQuery UI 小 部 件 工作 原理 


每 个 小 部 件 都 拥有 丰富 的 API， 包 括 选 项 、 事 件 和 方法 。 利 用 这 些 APT， a 
创建 自 定 义 组 件 ， 并 轻松 把 它 用 在 别 的 地 方 。 图 10- 5 展示 了 Tabs 小 部 件 页 。Tabs 组 件 要 么 通过 默 
认 设 置 ， 要 么 通过 API 选 项 完成 功能 。 


jQuery UI - Tabs Demos & Documentation 
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图 10-5 jQuery Tabs 小 部 件 及 所 有 文档 


10.3.4” 自 定义 jQuery UI 的 外 观 


jQuery UI 库 基 于 一 个 CSS 框 架 , 这 意味 着 我 们 能 够 轻易 地 通过 自 定义 实现 自己 的 风格 , 或 者 
使 用 ThemeRoller 创 建 一 个 主题 。10.3.5 节 将 详细 介绍 ThemeRoller。 一 个 主题 就 是 适用 于 jQuery UI 
库 中 所 有 组 件 的 CSS 样 式 和 图 片 的 集合 。 通 过 jQuery UI CSS 框 架 , 我 们 能 确保 所 有 设计 不 仅 适 用 
于 当前 UI 组 件 ， 而 且 适 用 于 将 来 的 UI 组 件 。 

CSS 框 架 的 优雅 之 处 在 于 所 有 组 件 均 使 用 相同 样式 ， 如 果 你 为 某 种 活跃 状态 设置 了 样式 ， 则 
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该 样式 自动 应 用 于 所 有 的 组 件 。 
该 CSS 框 架 由 两 个 样式 表 文 件 组 成 : 


口 ui.core.css 


O ui.theme.css 
下 面 是 一 段 由 一 个 jQuery UI 组 件 泻 染 出 来 的 HTML 代 码 片段 : 


<div role="tablist" class="ui-accordion ui-widget ui-helper-reset 
ui-accordion-icons" id="accordion"> 

<h3 tabindex="0" aria-expanded="true" role="tab" class="ui-accordion-header 
ui-helper-reset ui-state-default ui-state-active ui-corner-top"> 

<span class="ui-icon ui-icon-triangle-1-s"> 

</span> 

<a tabindex="-1" href="#"> 

NY Mets 

</a> 

</h3> 

<div role="tabpanel" style="height: 93px;" class="ui-accordion-content 
ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> 
<p> 

The New York Mets are a professional baseball team based in the borough of Queens in 
New York City. The Mets are a member of the East Division of Major League Baseball's 
National League. The Mets are also often referred to as the "Amazins" by fan and media 
alike. 

</p> 

<p>One of baseball's first expansion teams in 1962, the Mets won the 1969 World Series. 
They have played in a total of four World Series, the most of any MLB expansion team, 
including a second dramatic win in 1986.</p> 

</div> 

<h3 tabindex="-1" aria-expanded="false" role="tab" class="ui-accordion-header 
ui-helper-reset ui-state-default ui-corner-all"> 

«span class-"ui-icon ui-icon-triangle-1-e"» 

«/span» 

«a tabindex-"-1" href="#"> 

NY Jets 

</a> 

</h3> 

<div role="tabpanel" style="height: 93px; display: none;" class="ui-accordion-content 
ui-helper-reset ui-widget-content ui-corner-bottom"> 

<p> 

The New York Jets are a professional Football team based in East Rutherford, New Jersey, 
representing the New York metropolitan area. They are members of the Eastern Division 
of the American Football Conference (AFC) in the National Football League (NFL). In 
a unique arrangement, the Jets share New Meadowlands Stadium (located in East Rutherford, 
New Jersey) with the New York Giants. 

</p> 

</div> 

<h3 tabindex="-1" aria-expanded="false" role="tab" class="ui-accordion-header 
ui-helper-reset ui-state-default ui-corner-all"> 

«span class-"ui-icon ui-icon-triangle-1-e"» 

«/span» 

«a tabindex-"-1" href="#"> 

Manchester United 
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</a> 

</h3> 

<div role="tabpanel" style="height: 93px; display: none;" class="ui-accordion-content 
ui-helper-reset ui-widget-content ui-corner-bottom"> 

<p> 

Manchester United Football Club is an English professional football club, based in Old 
Trafford, Greater Manchester, that plays in the Premier League. Founded as Newton Heath 
LYR Football Club in 1878, the club changed its name to Manchester United in 1902 and 
moved to Old Trafford in 1910. 

</p> 

</div> 

</div> 


当 需 要 调整 组 件 的 外 观 时 ， 只 需要 修改 ui.theme.css 样 式 表 。 还 有 一 个 选择 ， 也 就 是 使 用 
ThemeRoller (一 个 由 jQuery UI 团队 创建 的 在 线 应 用 ) 设置 自己 的 主题 。 当 我 们 改变 样式 时 ， 新 
样式 的 效果 会 立刻 显示 在 由 所 有 jQuery 组 件 组 成 的 一 个 演示 页 面 上 。 


10.3.5 ”使 用 ThemeRoller 创 建 Ul 主题 


ThemeRoller(http://jqueryui.com/themeroller/) 提 供 了 一 个 在 线 向 导 , 这 使 得 设 将 其 应 定 主题 的 
字体 、 颜 色 、 边 界 样式 变 得 极为 简单 ， 可 以 从 网 上 下 载 主 题 并 为 其 应 用 这 些 选项 ,然后 将 其 应 用 
到 你 所 有 的 项 目 中 (参见 图 10-6 )。 如 果 懒 得 从 零 开 始 创建 一 个 主题 ，ThemeRoller 提 供 了 24 种 主 
题 供 你 选用 和 调整 。 


jQuery UI - ThemeRoller 
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nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
odio. Curabitur malesuada. Vestibulum a velit eu ante 
scelerisque vulputate. 


Autocomplete 


Slider 


Datepicker 


Q September 2010 © 


© 2010, jQuery H XÆ jQuery UI 团队 


图 10-6 jQuery UI ThemeRoller 
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(1) 设置 ThemeRoller 中 的 种 种 选项 。 创 建 一 个 主题 时 ， 我 们 可 设置 主题 的 以 下 样式 : 
a 字体 设置 ; 
a nif; 
口 头 部 (Header) sk TA (toolbar ); 
口 内 容 ; 
口 可 单 击 区 域 一 一 激活 状态 、 悬 停 状 态 和 默认 状态 ; 
a 突出 显示 ; 
口 错误 信息 ; 
口 覆盖 层 的 模 态 窗口 ; 
O 阴影 。 
(2) 在 ThemeRoller 中 的 左 侧 是 各 设置 项 ， 通 过 表单 设置 样式 。 当 你 改变 一 个 值 ， 这 个 改变 的 
效果 就 立即 应 用 在 右边 所 有 的 jQuery UI 组 件 示 例 上 。 你 可 以 随心 所 欲 地 对 显示 效果 进行 调整 。 
(3) 只 需要 单 击 Download Theme (下 载 主题 ) 按钮 ， 你 就 可 以 将 刚刚 创建 好 的 主题 下 载 到 自 
己 的 机 器 上 (参见 图 10-7 )。 


单 击 Download Theme 按钮 
jQuery Ul - ThemeRoller 
(3) &)- GE) (X) Gf) GSC hip: fjaveryui.com/themeroller] uv) Gay Q 
@ Disable * 久 Cookies + J CSS + ©] Forms ~ ™ Images * @ Information * C Miscellaneous + J Outline * $$ Resize » :六 Tools + $>) View Source ~ d Options | 


jQuery UI - ThemeRoller * T ww 


Accordion 


* Section 1 


Mauris mauris ante, blandit et, ultrices a, suscipit eget, 
quam. Integer ut neque. Vivamus nisi metus, molestie 
vel, gravida in, condimentum sit amet, nunc. Nam a 
nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
odio. Curabitur malesuada. Vestibulum a velit eu ante 
scelerisque vulputate. 


‘Autocomplete 


Slider 


Datepicker 


国 
Ss 


© September 2010 © 


Su Mo Tu We Th Fr Sa 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
m, quis nostrud exercitation ullamco 
a commodo consequat. 
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图 10-7 ThemeRoller 应 用 的 Download Theme 按 钮 


(4) 可 以 单独 下 载 某 个 主题 ， 也 可 将 其 打包 到 jQuery UI 下 载 包 中 下 载 (参见 图 10-8 )。 只 需 反 
选 所 有 的 jQuery UI 组 件 ， 然 后 只 下 载 这 个 主题 。 
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jQuery UI - Configure your download 


(4s) 8)- Ce (OX) (Of) CIO (| nup://jaueryui.com/download /?themeParams -X3Fctl3Dthemeroller wry) Ck Qa) jr 


@ Disable + Æ Cookies * i] CSS + ©] Forms + 3 Images + @ Information + “3 Miscellaneous * 4 Outline + | © Resize + gP Tools + $>) View Source * > Options 
f+) = 


| 四 jQuery Ut - Configure your downl. 


Quick downloads: Stable (Themes) (1.8.5: for jQuery 1.3.2+) | Legacy (Themes) (1.7.3: for jQuery 1.3+) 


Components (0 of 31 selected) ® Select all components 


UI Core 


© Core The core of jQuery UI, required for all interactions i 
and widgets. Custom Theme 


O Widget The widget factory, base for all widgets » Advanced Theme Settings 


© Mouse The mouse widget, a base class for all interactions 
and widgets with heavy mouse interaction. 


Version 
O Position A utility plugin for positioning elements relative to Select the release version you 
other elements. want to download. 


© 1.8.5 


© Deselect all (Stable, for jQuery 1.3.2+) 

Interactions O Draggable Makes any element on the page draggable. O173 
= (Legacy release, for jQuery 

口 proppable Generated drop targets for draggable elements. 133) 


O Resizable Makes any element on the page resizable. 


O Selectable Makes a list of elements mouse selectable by dragging 


a box or clicking on them. 
ii Download 
O Sortable Makes a list of items sortable 


Widgets LJ Accordion Creates an accordion navigation widget. For help with your JQuery ul 


downtnad_cherk 
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图 10-8 反选 了 所 有 jQuery UI 组 件 的 Build Your Download Vi 


(5) 主题 被 打包 成 一 个 扩展 名 为 .zip 的 压缩 文件 ， 它 的 目录 结构 如 下 : 
O /css/custom-theme/jquery-ui-1.8.5.custom.css 
Ll /css/custom-theme/1mages/ 
O /development-bundle/ 
QO /js/ 
其 中 主题 有 关 的 文件 位 于 /css 目 录 下 。 如 果 你 已 经 下 载 过 jQuery UI 的 JavaScript 文 件 ， 完 全 可 
义 忽略 其 中 的 锥 目录 。 
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不 管 是 通过 ThemeRoller 自 定义 一 个 主题 ,还 是 从 零 开 始 创 建 一 个 主题 ,我们 都 需要 在 用 到 
它 的 网 页 的 头 部 将 它 包 进来 ， 就 像 下 面 这 样 : 


<link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> 


10.3.7 ”将 jQuery UI 组 件 整 合 到 站 点 


TE T fi T jQuery UI 插件 的 工作 原理 之 后 ， 我 们 就 可 以 轻松 地 将 所 需 的 多 个 组 件 整 合 到 站 点 。 
接 下 来 ， 我 将 介绍 如 何 设置 ttbs、Accordion 、Autocomplete 和 Datepicker 组 件 。 
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1. Tabs 组 件 
jQuery UI tabs 是 一 个 小 部 件 ， 当 将 它 应 用 到 DOM 元 素 时 ， 能 动态 地 创 如 
添加 多 种 交互 手段 。 我 最 近 一 次 使 用 它 , 是 为 一 个 站 点 的 首页 创建 可 交互 的 幻 


多 个 标签 ， 为 站 点 
灯 片 (参见 图 10-9 )。 


使 用 jQuery UI 完成 工作 是 如 此 简单 ,， 它 ( 如 此 可 靠 ) 为 我 节省 了 大 量 的 排 错时 间 。 例子 中 的 


tabs 组 件 位 于 图 片 的 下 部 。 每 个 标签 对 应 一 张 图 片 。 切 换 标签 ， 图 片 会 相应 的 切换 ， 并 且 应 用 淡 


入 淡出 的 效果 。 


Laithwaites Wine | buy wine online, exclusive wine club offers, delivery direct to your door 


(4 > CQ) GD Cft). Ce hatp://172.31.250.51/index.aspx BY) Gi Goose 


Q) i 


@ Disable + Æ Cookies * |. CSS + E] Forms + 
1 L» Laithwaites Wine | buy wine onlin... 


JW Images + @ Information + ^ Miscellaneous + ../ Outline » $2 Resize + P Tools * {2) View Source + +» Options 


Laithwaites 


k WI View Cart - 1 Item 


From the vineyard to your door, since 1969 


Wine» 


Latest Offers 4 Seasons Wine Club Special Occasion Wines Customer Service About Wine About Us 


Search Wines 
Top Searches 


Mixed Cases 

Top Red Wines 
Top White Wines 
Eine & Rare Wines 


4sea 


bau 0 rdeaux Buy 3 world of 
Reserved for you from 'Le Chai', our 
very own riverside cellar in Bordeaux 


Pinot Noir de - 一 一 — À E 
i A 
OrderNOW b 
x - 
Sparkling & Cham nü : 12 bottles JUST $189.9! 


Browse by Type 


Our Top 12 Wines Great Value Bubbly 


Browse by Country 
Browse by Region 


Browse by Grape Laithwaites Recommends 


Browse by Price 
Order now and SAVE $31 


Shipping To: CT Change state | Checkout | Log In | Customer Service 


Sens 


wine discovery 


Big Fall Reds 100% Money-Back Guarantee 


Special E-mail Updates LI Ji 1 Were so confident in the quality 


of our wines that we guarantee 


E Done 


一 种 标签 式 幻灯 片 
图 片 截取 自 Laithwaiteswine.com 


图 10-9 Laithwaites Wine 站 点 上 的 标签 式 幻 灯 片 


我 将 在 下 面 的 教程 中 教 你 设置 支持 动画 的 标签 式 幻 灯 片 ， 就 像 Laithwaites Wine 网 站 上 的 


一 样 。 


(1) 通 过 Build Your Download 页 (http:/jqueryui.com/download ) 下 载 包 含 tabs 组 件 的 jQuery UI 


包 ， 然 后 把 jQuery UI 包含 到 页 首部 分 : 


# WB vsiow 


<link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> 


(2) 包含 自 定 义 主题 的 CSS 文 件 : 


<link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> 
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(3) 编写 HTML。 当 我 们 使 用 jQuery UI 组 件 时 , 有 关 的 HTML 代 码 必 须 遵 守 组 件 的 约定 , 否则 
昌 件 将 无 法 正确 地 泻 染 这 些 HTML。 将 所 有 的 HTML 代 码 包 到 一 个 ig="tabs" 的 giv 元素 中 , tabs 
昌 件 将 依据 该 1a 引 用 这 段 HTML。 每 个 标签 的 ia 必须 以 tab 开 始 ， 后 面 跟着 一 个 连 字符 和 顺序 增 
长 的 序号 (#tab-1、#tab-2、#tab-3*……… ), 


MS MS 


«div id="tabs"> 
«div id="tabs-1"> 


«a href="#"> «img src-"../images/homepage/4s tab offerl1 july2010.jpg" 
alt-"History of Laithwaites Wine" alt=""/></a> 
«/div» 


«div id="tabs-2"> 
«a href="#"><img src-"/images/homepage/4s tab offer2 sep2010.jpg" alt-"Kings 
of Cabernet" alt=""/></a> 
«/div» 
«div id="tabs-3"> 
«a href="#"><img src-"/images/homepage/4s tab offer3 sep2010.jpg" alt= 
"Discover Chile" alt=""/></a> 
«/div» 
«div id="tabs-4"> 
«a href="#"><img src-"/images/homepage/4s tab offer4 sep2010.jpg" alt= 
"World-class Ros"|" alt=""/></a> 
</div> 
<ul> 
<li><a href="#tabs-1">History of Laithwaites «/a»«/li» 
<li><a href="#tabs-2">Kings of Cabernet «/a»«/li» 
<li><a href="#tabs-3">Discover Chile «/a»«/li» 
<li><a href="#tabs-4">World-class Rose</a></1li> 
</ul> 
</div> 


(4) 用 jQuery 选中 #tabs 元 素 ， 然 后 对 其 应 用 tabs 方 法 。 为 了 让 标签 能 够 自动 轮 播 ， 设 置 tabs 
的 rotate 属 性 为 72000， 这 样 每 隔 7 s 就 会 自动 切换 标签 。 

S("#tabs").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 7000); 

2. Beat 

Drea ERI HT SN, 也 可 用 于 在 一 个 局 促 的 空间 里 设置 导航 工具 ,在 网 上 被 广泛 应 用 。 
当 将 它 用 于 导航 时 , 折 受 组 件 把 许 许多 多 的 菜单 选项 缩 略 为 一 个 小 菜单 , 让 用 户 方便 地 漫游 站 点 。 
有 时 ， 折 二 组 件 有 多 种 多 样 的 折 页 (就 像 一 页 页 幻灯 片 ) 并 且 内 容 可 由 Ajax 动态 生成 ， 这 样 无 须 
刷新 页 面 就 能 得 到 新 的 内 容 。 

在 第 6 章 中 ， 我 介绍 了 如 何 创 建 自己 的 折 和 县 菜单 或 折 受 内 容 ， 大 约 用 了 10 行 代码 ， 而 使 用 
jQuery UI 实现 同样 的 效果 ， 只 需要 一 行 代 码 ( 使 用 默认 设置 )， 见 图 10-10。 真 是 简单 到 极点 ! 

(1) 通过 Build Your Download 页 ( http://jqueryui.com/download ) 下 载 包 含 Accordion 组 件 的 
jQuery UI 包 ， 然 后 把 jQuery UI 包含 到 页 首部 分 : 

<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 

(2) 包含 自 定 义 主题 的 CSS 文 件 : 


<link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> 
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一 个 折 和 县 菜单 
000 Laithwaites Wine | buy wine online, exclusive wine club offers, delivery direct to your door = 
(<) 中 -CCD (x) Oft). Cos http; www.aithwaiteswine.com/ Xr) i coo a) tar 
© psc + Æ Cookies + CSS + =] Forms + 3 Images * @ Information + Miscellaneous * ^ Outline » | 2 Resize + j^ Tools * £>) View Source * SD Options 
LES Laithwaites Wine | buy wine onlin... | = 


Shipping To: CT Change state | Checkout | Log In | Customer Service 


Laithwaites 


Win 2 From the vineyard to your door, since 1969 Wf view Cart - 1 item 
Latest Offers 4 Seasons Wine Club Special Occasion Wines Customer Service About Wine About Us 
Search Wines 
| , Star Bordeaux Buy 4seaséns 


Browse by Type Reserved for you from ‘Le Chai’, our 


very own riverside cellar in Bordeaux 
Red Wines 


Rose/Blush Wines 
Sparkling Wines 
‘Sweet White Wines è 
White Wines —-—  -—-—d 
OrderNOW b 
12 bottles JUST $189.99 


OurTopi2Wines Great Value Bubbly .TT 


Browse by Country > 
Browse by Region > 


Browse by Grape T Laithwaites Recommends 
Browse by Price > Big Fall Reds 100% Money-Back Guarantee 
E Order now and SAVE $31 
Special E-mail Updates Learn More We're so confident in the quality a 
CiD A of our wines that we guarantee ly 
E Done + Wà Ysiow d 


图 片 截取 自 Laithwaiteswine.com 


图 10-10 Laithwaites Wine 站 点 上 的 一 个 折 羡 菜单 


(3) 编写 HTML。 当 我 们 使 用 jQuery UI 组 件 时 ， 有 关 的 HTML 代码 必须 遵守 组 件 的 约定 ,否则 
组 件 将 无 法 正确 地 泻 染 这 些 HTML。 每 个 jQuery UI 组 件 都 有 一 个 专门 的 文档 网 页 ， 当 你 需要 设置 
一 个 组 件 时 ， 一定 要 参考 这 个 文档 网 页 。Accordion 组 件 的 文档 页 位 于 http://jqueryui.com/demos/ 
accordion/。 将 所 有 折 苔 内 容 HTML 包 到 一 个 id="accordion" 的 div 元 素 中 ，Accordion 组 件 将 依 
据 该 ia 引用 这 段 HTML。 每 块 折 受 内 容 都 需要 有 一 个 hn3 元 素 (存放 标题 ) 和 一 个 紧 跟 其 后 的 div 
TTR (FAR )。 


<div id="accordion"> 
<h3><a href="#">NY Mets</a></h3> 
<div><p>The New York Mets are a professional baseball team based in the borough of 
Queens in New York City. The Mets are a member of the East Division of Major League 
Baseball's National League. The Mets are also often referred to as the "Amazins" 
by fan and media alike.</p> 
One of baseball's first expansion teams in 1962, the Mets won the 1969 World Series. 
They have played in a total of four World Series, the most of any MLB expansion team, 
including a second dramatic win in 1986.</p> 
«/div» 
<h3><a href="#">NY Jets</a></h3> 
<div><p>The New York Jets are a professional Football team based in East Rutherford, 
New Jersey, representing the New York metropolitan area. They are members of the 
Eastern Division of the American Football Conference (AFC) in the National Football 
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League (NFL). Ina unique arrangement, the Jets share New Meadowlands Stadium (located 
in East Rutherford, New Jersey) with the New York Giants.</p> 

</div> 

<h3><a href="#">Manchester United</a></h3> 

<div><p>Manchester United Football Club is an English professional football club, 
based in Old Trafford, Greater Manchester, that plays in the Premier League. Founded 
as Newton Heath LYR Football Club in 1878, the club changed its name to Manchester 
United in 1902 and moved to Old Trafford in 1910.</p> 


</div> 
</div> 
(4) 用 jQuery 选中 #accordion 元 素 ， 然 后 调用 .accordion() 方 法 。 这 个 教程 的 显示 效果 见 
图 10-11。 


$("#accordion") .accordion(); 


Mozilla Firefox 


(4) )- CeO CX) Gf). CO he: /www.smashingjquery.com/code/chap10/ui-accordion.html uy) Gk Q) fei: 


@ Disable + Æ Cookies + J CSS + ©] Forms + /S Images + @ Information * — Miscellaneous + -7 Outline + $3 Resize + gP Tools + {2) View Source » HD Options 
= — 
] D) http jwww.smas...-accordion.htmi [EE = 


> 
NY Mets 
NY Jets k 


Football team based in East Rutherford, Ni 
e (AFC) in the National Football League (NFL). In 


, 
Manchester United 


+ ay Console HTML CSS Script DOM  Netw | PageSpeed Page Speed Activity — YSlow eco 
i4 | Clear Persist €T HTML CSS JS XHR Images Flash 

URL Status Domain | Size Timeline 

> GET ui-accordion.html or smashingjquery.com 1.9 KB. M 71ms 

> GET jquery.ui.base.css 0 OK smashingjquery.com 348 ME m: 

200 OK smashingjquery.com 19.1 KB mr 311ms 
J Ok ajax.googleapis.com 49.7 KB NS 153ms 
K smashingjquery.com 1.4 KB Bl sams 

P GET ui-icons 454545 2 2000k smashingjquery.com — 4.3 KB HE, 206: 

> GET ui-icons 888888 2 2 OK smashingjquery.com 4.3 KB EE sr: 

> GET ui-bg diagonals-th 200 OF smashingjquery.com — 126 B DE 164: 

> GET ui-bg glass 65 fff K smashingjquery.com 105 8 EN 1 

> GET ui-bg glass 75 e6¢ — 200 Ok smashingjquery.com — 1108 EN i: 

> GET ui-bg glass 75 fd7 200 OF smashingjquery.com 1808 H co 

11 requests 81.1 KB T 1.43s (onload: 903ms) 


区 Done # Bs 107.5K 0.959 


图 10-11 jQuery UI ZB Ez A]. ( 另 见 彩 捅 图 10-11 ) 


如 果 你 打算 进一步 定制 Accordion jQuery UI 站 点 上 有 一 份 文档 ( http://jqueryui.com/demos/ 
accordion/ )， 这 份 文档 含有 accordion 组 件 的 所 有 可 用 选项 。 


3. 


Autocomplete 组 件 


谷歌 搜索 引擎 提供 了 自动 完成 功能 (参见 图 10-12 )。 当 我 在 谷歌 搜索 框 中 键入 jquery UI 时 ， 
谷歌 会 自动 生成 一 个 下 拉 菜 单 给 出 一 些 建议 关键 字 供 我 选择 。 自 动 完成 ,又 称 为 搜索 提示 ， 经常 
用 于 搜索 输入 框 及 一 些 其 他 类 型 的 查找 框 。 开始 键入 时 ,就 开始 进行 逐 字 母 匹 配 ， 而 建议 选项 则 
直接 显示 在 文本 框 之 下 , 这 极 大 地 方便 了 用 户 的 查找 操作 , 特别 是 在 用 户 对 要 查 的 单词 拼写 有 点 
拿 不 准时 。 
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jquery ul - Google Search c 
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$J Everything jquery ui tabs 


& Images jquery ui datepicker 
lili Videos jquery ui autocomplete 
了 More ‘About 2,600,000 results (0.15 seconds) Advanced search 
Any time jQuery UI - Home 
Past 24 hours jQuery Ul is the official jQuery user interface library. It provides interactions, widgets, effects, 
and theming for creating Rich Internet Applications. 
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Demos & Documentation Getting Started 
Something different Download Development 
scriptaculous Themes Support 
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jQuery UI provides a comprehensive set of core interaction plugins, UI widgets and visual 
effects that use a jQuery-style, event-driven architecture and a ... 

Accordion - Datepicker - Tabs - Dialog 

jqueryui.com/demos! - Cached - Similar 


UI - jQuery JavaScript Library 


This is the official documentation for jQuery UI, jQuery's visual controls. jQuery UI features a 
wide range of core interaction plugins as well as many Ul ... 
docs.jquery.com/Ui - Cached 


UV/API/1.8/Tabs - jQuery JavaScript Library 
The jQuery UI Tabs plugin uses the jQuery UI CSS Framework to style its look and feel 
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图 10-12 ”谷歌 搜索 引 警 提供 的 自动 完成 功能 


jQuery UI 中 有 一 个 用 起 来 极其 简单 的 自动 完成 组 件 ， 使 用 时 只 需要 简单 几 行 JavaScript 代 码 。 
在 下 面 这 个 例子 中 ， 我 将 介绍 如 何 设置 一 个 基础 的 自动 完成 组 件 ( 参见 图 10-13 )。 

(1) 通 过 Build Your Download 页 ( http://jqueryui.com/download ) 下 载 包 含 Autocomplete 组 件 的 
jQuery UI 包 ， 然 后 把 jQuery UI 包含 到 页 首部 分 : 

<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 

(2) 包含 自 定义 主题 的 CSS 文 件 : 

<link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> 


(3) 创建 一 个 id="search" 的 文本 杠 ， 然 后 将 Autocomplete 组 件 绑 定 到 这 个 文本 框 。 


<label>Search</label> 
<input type="text" id-"search" /> 


(4) .autocomplete() 方 法 有 一 个 source 选 项 ， 输 入 框 内 的 文字 就 是 和 它 进行 匹配 。 你 可 以 
将 这 个 source 设 置 为 远程 脚本 、 一 个 XML 文 件 或 者 像 这 个 例子 中 一 样 设置 为 一 个 数组 。 要 详细 
了 解 各 种 数据 来 源 的 类 型 ， 请 参考 jQuery UI 的 文档 。 


var availableTags = [ 
"Nike", 
"Puma", 
"Aldo", 
"Tiger", 
"Cole Haan", 


Style» Computed Layout DOM 


This element has no style rules. 


jet ui-widget-content 


i- 


active- 
x; display: block; position: 


图 10-13 一 个 jQuery UI 自动 完成 组 件 示 例 ( 男 见 彩 插图 10-13 ) 


(5) 用 jQuery 选中 iaq="search" 的 元 素 ， 然 后 调用 .autocomplete() 方 法 ， 并 将 上 面 创建 的 
availableTags 变 量 做 为 source 人 参数 传递 进去 。 

$("#search").autocomplete({source: availableTags}) ; 

4. Datepicker#8 {+ 

jQuery UI 还 包含 一 个 相当 灵活 的 日 期 拾取 组 件 〈 创 建 一 个 小 巧 的 弹出 日 历 ， 供 用 户 选 取 日 
期 )， 可 以 绑 定 到 任意 一 个 文本 输入 框 ， 就 像 图 10-14 中 TripAdvisor 网 站 上 的 日 期 拾取 器 一 样 。 日 
期 拾取 器 越 来 越 流行 ， 我 甚至 都 记 不 起 最 后 一 次 手工 输入 日 期 是 什么 时 候 了 。 

要 是 没有 日 期 拾取 需 , 网 上 的 日 子 就 不 这 么 好 过 了 。 jQuery UI 包含 一 个 相当 好 用 的 日 期 拾取 
器 组 件 。 下 面 是 一 个 日 期 拾取 器 教程 (参见 图 10-15 )。 

(1) 通过 Build Your Download 页 ( http://jqueryui.com/download ) 下 载 包含 Datepicker 组 件 的 
jQuery UI 包 ， 然 后 把 jQuery UI 包含 到 页 首部 分 : 

<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> 


(2) 包含 自 定 义 主题 的 CSS 文 件 : 


<link type="text/css" href="../themes/base/jquery.ui.all.css" rel="stylesheet" /> 
(3) 创建 一 个 ia="dqate" 的 文本 框 ， 然 后 将 它 绑 定 到 Datepicker 组 件 。 
<label>Date</label> 


<input type="text” id="date” /> 
<div> 


10.3 在 站 点 上 包含 jQuery UI 
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图 10-15 jQuery UI 日 期 拾取 器 
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(4) 用 jQuery 选中 #date 元 素 , 然后 调用 .datepicker () 方 法 。 要 进一步 定制 Datepicker 组 件 ， 
请 访问 它 的 文档 。 文 档 地 址 为 http://jqueryui.com/demos/datepicker/。 


$('#datepicker') .datepicker(); 


10.4 整合 流行 的 jQuery 插件 到 站 点 


无 数 的 Web 设 计 师 和 开发 者 都 是 jQuery 的 粉丝 ,他 们 
在 广阔 的 领域 贡献 了 许多 极其 好 用 的 插件 ( Ajax 、 图 库 等 ) 
如 果 你 打算 写 个 什么 东西 ， 建 议 你 先 查 一 下 ， 很 可 能 会 
找到 一 个 现成 的 jQuery 插件 ( 也 很 可 能 不 止 一 个 )。 

jQuery 官网 专门 有 一 个 插件 子 站 ( http:/plugins. 
jquery.com/ )， 人 允许 你 提交 自己 编写 的 插件 及 针对 自己 站 
点 所 用 第 三 方 插件 的 错误 报告 ( 参见 图 10-16 )。 
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图 10-16 jQuery 官网 插件 子 站 


10.4.1 jQuery Tools 


类 似 于 jQuery UI, jQuery Tools (http:/flowplayer.org/tools/index.html ) 也 是 一 个 UI 库 ( 参见 
图 10-17 ), 包含 6 个 组 件 一 一 tabs tooltips, overlays, 、scrolling 功 能 、forms 和 toolboxes。 这 个 库 体 
积 非常 小 ， 只 有 大 约 16 KB ， 因 此 它 是 一 个 很 好 的 jQueryUI 蔡 代 品 。jQuery UI 拥有 极其 丰富 的 功 
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能 ， 其 中 很 多 你 可 能 一 辈子 也 用 不 到 。 这 意味 着 它 的 体积 很 大 , 会 影响 页 面 的 加 载 速度 及 网 站 性 
能 。 如 果 你 不 需要 使 用 所 有 的 组 件 ， 这 就 有 点 讨厌 。 
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图 10-17 jQuery Tools Ej Jt 


jQuery Tools 允 许 你 只 下 载 自 己 需要 的 组 件 ， 从 而 让 库 文件 保持 最 小 。 

jQuery Tools 是 一 个 极其 简化 的 UI 库 ， 因 为 它 只 包含 6 个 组 件 ， 不 提供 主题 库 和 CSS 框 架 。 

因此 , 修改 jQuery Tools 组 件 的 外 观 不 如 使 用 jQuery UI 时 那样 平滑 。 由 于 缺少 CSS 框 架 和 主题 
库 ， 你 不 得 不 根据 站 点 或 应 用 程序 的 需要 亲自 定义 HTML 和 CSS。 用 jQuery Tools 代 替 jQuery UI 
有 很 多 好 处 ， 比 如 刚好 够 用 的 组 件 集 ( 不必 为 不 需要 的 功能 买单 )、 更 小 的 文件 ( 约 4KB ), 与 已 
有 HTML 代 码 集成 的 能 力 (HIML 代 码 不 必 遵 守 jQuery UI 定义 好 的 那 一 套 结构 ) 等 具体 因 网 站 或 
应 用 而 异 。 如 果 你 是 接手 一 个 现成 的 站 点 ， 使 用 jQuery Tools〈 而 不 是 jQuery UI) 更 容易 改造 或 
优化 一 些 功能 ， 比 如 标签 和 有 履 盖 层 。 

1. iz &jQuery Tools 

设置 jQuery Tools 的 方式 和 设置 jQuery UI 几乎 一 样 。 你 可 以 下 载 包 含 所 有 组 件 的 整个 包 ， 也 
可 以 只 下 载 自 己 需 要 的 组 件 。 

然后 把 下 载 完成 的 jQuery Tools Java Script 文件 上 传 到 Web 服 务 器 的 js 目录 下 ， 并 将 如 下 所 示 
的 script 标 签 放 入 你 的 网 页 ， 包含 在 jQuery 底 后 面 ， 其 中 路 径 为 插件 所 在 位 置 。 
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<script type-"text/javascript" src-"js/jquery-1.4.2.min.js"»«/script» 
«script src-"js/jquery.tools.min.js"»«/script» 


2. 使 用 Tabs 工 具 创建 动态 标签 
我 最 近 用 Tabs 工 具 在 一 个 站 点 的 产品 详情 页 里 添加 了 一 个 标签 切换 内 容 区 ， 如 图 10-18 所 示 。 
jQuery Tabs 工 具 允 许 我 们 利用 站 点 上 已 有 的 HTML 结 构 快速 添加 标签 。 
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图 10-18 使 用 了 tabs 组 件 的 Laithwaites Wine 网 页 


在 下 面 这 个 教程 里 ， 我 们 使 用 jQuery Tools 中 的 Tabs 工 具 创建 动态 标签 ( 类 似 前 面 jQuery UI 
的 例子 )， 只 是 这 次 我 们 对 更 少 的 HTML 拥 有 更 多 的 控制 。 这 里 提 到 更 多 的 控制 ， 说 的 是 我 们 不 
必 使 用 类 似 jQuery UI 的 CSS 框 架 来 设置 标签 的 样式 。 

(1) 编写 Tabs 所 需 的 HTML。 在 这 个 例子 里 , 我 使 用 一 个 无 序列 表 保 存 标签 标题 , FE 
的 aiv 元 素 保存 标签 内 容 。 这 些 标签 都 能 和 jQuery Tools 协 同 工 作 ， 因 为 后 者 不 像 jQuery UI 那样 严 
格 要 求 特定 的 HTML 结 构 。HTML 结 构 由 你 定义 。 

<ul class="product-tabs"> 


«li class="t-desc"><a href="#">Description</a></1li> 
«li class="t-rev" ><a href="#">Customer Reviews</a></1li> 


</ul> 


<div class="tab-panes"> 
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<div class="description"> 

<p>Perfect with food, two presidents and the Queen of England.</p> 

<p>The "Rhône Rangers" are an elite group of California winemakers, centered 
around Paso Robles, whose holy grail is the dark, rich, black fruit magic of the best 
Rhóne wines. Don Brady, elected 2006 Paso Robles Winemaker of the Year by his peers, 
has combined the keystone Rhóne grapes of Syrah, Grenache and Cinsault to conjure 
his Cuvée de Robles 2006, exclusively for WSJwine. After 14 months in oak, with fresh 
cherry and cranberry aromas and rich, silky tannins, this is perfect wine to 


complement food and honor company. Which is why Don's wines were on the table at 
the White House dinner when the company was Queen Elizabeth II.«/p» 
«/div» 


«div class-"customer-reviews" style="display:none; "> 
<p>No Reviews Yet.</p> 
</div> 


</div> 

(2) 用 jQuery 选中 这 个 ( .product-tabs ) 无 序列 表 ， 然 后 应 用 .tabs () 方 法 。 我 们 必须 把 对 
应 标签 的 选择 器 作为 参数 传递 给 .tabs () 方 法 。 在 本 例 中 ， 与 标签 相对 应 的 内 容 封 装 在 class= 
"tab-panes" 的 元 素 中 ， 因 此 我 们 应 该 使 用 " .tab-panes > div" 选 择 器 匹配 .tab-panes 元 素 
的 所 有 aiv 子 元 素 。 简 单 来 说 ， 这 一 语句 的 意思 是 : 选中 标签 元 素 .product-tabs (标签 导航 ), 
对 其 应 用 .tabs () 方 法 并 告诉 .tabs () 方 法 内 容 保存 在 .tab-panes 中 的 daiv 元 素 中 。 

$(".product-tabs").tabs(".tab-panes > div"); 

jQuery tools 中 的 tabs 组 件 有 非常 多 的 选项 ， 可 用 来 创建 更 高 级 的 标签 效果 ， 比 如 带动 画 效果 
的 幻灯 片 ， 支 持 淡 入 淡出 效果 、 动 态 内 容 等 。 如 果 有 兴趣 详细 了 解 这 些 选 项 ， 在 jQuery Tools 官 
方 网 站 ( http://flowplayer.org/tools/documentation/index.html ) 有 相当 完备 的 文档 。 


10.4.2 Fancybox 


Fancybox ( http://fancybox.net/ ) 是 一 个 基于 jQuery 库 的 轻 量 级 lightbox 插 件 。lightbox 通 过 覆 
羡 在 当前 页 面 上 的 覆 六 层 显 示 图 片 , 这 样 就 不 必 将 用 户 重 定向 到 新 页 面 。 当 图 片 显示 出 来 时 , 一 
个 黑色 的 半 透 明 背 景 覆 盖 在 整个 屏幕 上 ， 图 片 则 通常 位 于 一 个 白色 边框 的 容器 中 并 显示 为 前 景 
图 。 图 10-19 展 示 了 Netflix 站 点 ( www.netflix.com ) 上 的 一 个 lightbox 效 果 。 

Fancybox 搬 件 的 故事 始 于 最 早 的 Lightbox 搬 件 。 那 还 是 在 2006 年 ， 我 刚刚 开始 使 用 Lightbox 
插件 (www.lokeshdhakar.com/projects/lightbox2/ )。 从 那 时 起 ，Lightbox 陆 续 发 布 了 很 多 新 版 本 ， 
其 最 近 一 次 更 新 在 2008 年 。 由 于 Lightbox 2 提供 的 技术 支持 有 限 ， 我 转 而 开始 使 用 Cody Lindley 
的 Thickbox 插 件 (http:/jquery. com/demo/thickbox )。Thickbox 沦 试 扩 展 了 lightbox 的 功能 ， 它 不 仅 
仅 文 持 显示 图 片 ， 而 且 文 持 显 示 视 频 ， 甚 至 来 自 其 他 地 方 的 动态 内 容 。 在 大 约 3 年 的 时 间 里 ， 我 
在 很 多 项 目 中 使 用 了 Thickbox， 直 到 Thickbox 的 作者 停止 了 对 它 的 支持 。 后 来 我 选择 了 Fancybox 
(参见 图 10-20 )， 它 真是 让 我 神 清 气 爽 。 
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图 10-19 Netflix 使 用 一 个 lightbox 窗 口 显 示 产 品 简介 ( 男 见 彩 析 


—Mightbox 7! iz: 
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图 10-20 Fancybox 插件 演示 ( 另 见 彩 捐 


图 10-20 ) 
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我 选择 Lightbox 插 件 的 故事 告诉 我 们 : 插件 非常 有 用 ， 只 是 一 旦 插件 背后 的 某 个 人 或 蘑 家 公 
司 对 它 停 止 了 支持 , 你 只 能 要 么 继续 使 用 它 , 同时 奢望 自己 在 升级 jQuery 时 该 插件 还 能 正常 工作 ， 
要 么 扔 掉 该 插件 再 找 一 个 新 的 。 每 当 这 一 幕 上 演 时 ,我 都 选择 一 个 新 插件 ,通常 是 一 个 更 好 ,并 
且 具 有 更 多 功能 的 新 插件 。 

(1) 在 使 用 jQuery 插件 时 ， 总 要 将 它 包含 在 页 首 , 且 总 是 将 择 件 包含 在 紧 跟 jQuery 库 之 后 ( 务 
必 将 jQuery 库 和 插件 包含 在 自己 的 jQuery 代码 之 前 )。 

<script src="js/fancybox.js"></script> 

(2) 准备 HTML 代 码 时 ， 为 你 准备 应 用 Fancybox 搬 件 的 链接 标签 添加 一 个 类 。 类 的 名 字 可 以 
随便 取 ， 我 在 此 处 为 其 取 名 为 fancybox。 


<a class="fancybox" 
href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg"><img alt= 

"examplel" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" /> 
</a> 


(3) 写 一 个 语句 选中 . fancybox 元 素 ， 然 后 调用 .fancybox() 方 法 。 如 果 你 不 提供 任何 参 
数 ，. fancybox() 方 法 就 使 用 默认 设置 。 
$(".fancybox").fancybox(); 


请 访问 Fancybox 官 方 站 点 ( http;//fancybox.net/ ) 查看 完备 的 文档 。 
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要 把 自己 编写 的 功能 代码 分 享 到 jQuery 社区 ， 最 好 的 方式 是 写 一 个 插件 ， 这 样 开发 者 们 就 能 
非常 容易 地 将 它 应 用 到 自己 的 项 目 中 。 如 果 一 个 站 点 中 好 多 应 用 都 要 用 到 某 个 功能 , 你 也 可 以 把 
这 个 功能 写成 插件 自己 用 。 

在 构建 与 维护 DOM 或 Ajax 迭代 过 程 中 , 绝 大 多 数 网 站 问题 或 功能 改进 都 可 用 jQuery 解决 , 并 
可 随后 将 解决 问题 的 代码 改写 成 一 个 插件 ， 以 便 重用 。 不 过 ， 当 已 经 有 类 似 功 能 的 插件 可 用 时 ， 
或 者 你 的 代码 仅仅 是 一 次 性 用 来 修复 一 个 小 bug, 就 没有 必要 为 写 插 件 而 写 插 件 了 。 在 编写 jQuery 
插件 时 ， 请 务必 牢记 下 面 几 个 重要 的 提示 。 
a 为 插件 取 一 个 独一无二 的 名 字 。 在 选 定名 字 之 前 ,一定 要 检查 一 下 是 否 和 已 有 插件 重 名 。 
口 为 了 避免 和 其 他 也 使 用 了 $ 别 名 的 JavaScript 库 发 生命 名 冲突 , 在 插件 中 要 避免 使 用 $ 别 名 。 
口 合理 注释 你 的 插件 。 

a 一 定 要 为 插件 选 一 个 开源 许可 协议 ， 以 方便 插件 传播 。 

a 动手 写 代码 之 前 ， 先 在 纸 上 做 计划 ， 把 插件 要 干什么 以 及 打算 怎么 干 想 清 楚 。 

OQ 要 有 默认 选项 ， 且 默认 选项 可 被 用 户 设置 覆盖 。 

口 阅读 jQuery 插件 文档 , 检查 自己 的 插件 是 否 符 合 要 求 , 参见 图 10-21( http://docs. jquery.com/ 
Plug-ins/Authoring )。 
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10.5.1 筹划 一 个 插件 


接 下 来 我 要 写 
列表 的 前 10 项 可 见 ， 


剩 下 的 : 


示 。 我 希望 它 能 改变 导航 链接 的 文本 ， 也 能 改变 显示 出 来 的 链接 数目 。 这 些 
非常 适合 用 来 展示 如 何 编写 插件 。 嗯 ， 


10.5.2 ”插件 的 结构 


在 开始 编写 插件 之 前 ， 我 要 介 


jQuery .fn 对 象 的 方法 : 


jQuery.fn.showhidePlugin 
// 插 件 相关 代码 
u 


一 个 示例 插件 ,在 这 


search very m God 


Plugins/Authoring 


So you've become comfortable with jQuery and would like to learn how to write your own plugins. 
Great! You're in the right spot. Extending jQuery with plugins and methods is very powerful and can 
save you and your peers a lot of development time by abstracting your most clever functions into 
plugins. This post will outline the basics, best practices, and common pitfalls to watch out for as 
you begin writing your plugin. 


k 

CONTENTS 
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2 Context 
3 The Basics 
4 Maintaining Chainability 
5 Defaults and Options 
6 Namespacing 

6.1 Plugin Methods 

6.2 Events 

6.3 Data 
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图 10-21 jQuery 插件 文档 


文 个 例子 中 , 我 打算 选用 一 


个 动态 生成 的 无 序列 表 ， 
项 处 于 隐藏 状态 ， 使 用 一 innu edu. 


它 很 简单 ， 不 至 于 把 大 家 搞 糊涂 。 


= Function() t 


让 这 个 
| 隐藏 项 是 否 显 


tb 是 相当 基础 的 功能 ， 


一 下 插件 的 基本 结构 。 所 有 的 jQuery 插件 都 声明 为 


我 们 使 用 如 下 代码 使 用 这 个 插件 : 


$('.selector') .showhidePlugin(); 


为 了 和 已 有 插件 保持 一 致 ， 我 建议 在 保存 
总 是 在 插件 文件 名 的 开头 使 用 单词 jquery， 这 非 


件 时 采用 jquery.pluginname.js 这 种 命名 格式 。 我 
常 有 利于 代码 文件 的 组 织 ， 让 人 一 眼 就 能 看 出 它 
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是 一 个 jQuery 插件 。 

注意 我 没有 使 用 $ 别 名 ,而 是 使 用 jQuery 以 避免 任何 可 能 的 命名 冲突 。 如 果 更 喜欢 使 用 $ 而 不 
是 jQuery, 可 以 像 下 面 这 样 把 插件 代码 封装 在 一 个 自 执行 的 匿名 函数 中 。 这 个 方法 非常 巧妙 , X 
仅 增 加 了 一 个 自 执行 函数 ， 就 能 够 安全 地 在 插件 内 使 用 $ 别 名 ， 不 会 引起 任何 问题 。 


(f£unction($)( 
jQuery.fn.showhidePlugin = function() { 
/ /插件 相关 代码 
is 
J)( jQuery ); 


10.5.3” 设 定 插件 选项 


通过 传递 给 插件 方法 一 个 options 参 数 ， 我 们 就 可 以 让 插件 支持 设置 选项 。 我 们 使 用 一 个 
JSON 对 象 作为 插件 的 默认 选项 ,这 个 插件 有 3 个 默认 选项 一 一 numshown、showText 和 hideText。 
默认 设置 在 插件 内 部 初始 化 ， 运 行 时 传递 进来 的 用 户 选项 会 覆盖 掉 默 认 设 置 。 


(function($)( 
jQuery.fn.showhidePlugin = function(options) { 


// 设 定 默 认 值 ， 用 过 号 分 隔 选 项 

var defaults = { 
numShown: 10, 
showText : 'Show More Links', 
hideText : 'Hide Links' 

} 


» jQuery ); 

接 下 来 ， 使 用 $. extend 方 法 合并 默认 选项 和 用 户 
选项 。 如 果 调 用 时 提供 了 用 户 选 项 ， 它 们 将 覆盖 掉 插 
件 内 部 声明 的 默认 选项 。 


.extend (0 00000000 
T8 o o o o DUE o o a o o o a o o 
o o o o o o o o o o o o o oo 


(function($) { 

jQuery.fn.showhidePlugin = function (options) 0 0 0 0 0 0 0 0 " 

{ 

// 设 定 默 认 值 ， 用 过 号 分 隔 选 项 

var defaults = { om 
numShown: 10, 
showText : 'Show More Links', 
hideText : 'Hide Links' 

} 

var options = $.extend(defaults, options); 


F; 
})( jQuery ); 
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10.5.4 创建 插件 


我 们 在 上 一 步 中 完成 了 选项 设置 ， 接 下 来 将 混合 使 用 jQuery 脚本 和 JavaScript 原 生 肢 本 实现 插 
件 的 主体 功能 。 这 个 插件 将 适用 于 任何 无 序列 表 。 我 们 使 用 numshown 变 量 的 值 截断 这 个 列表 ， 
然后 添加 隐藏 和 显示 链接 来 切换 隐藏 项 的 显示 状态 〈 可见 或 隐藏 )。 

(1) 添加 一 个 .each () 方 法 迭代 选择 器 匹配 的 元 素 ， 并 返回 this 对 象 。 这 一 步 (返回 this 对 
象 ) 非 常 重要 ,所 有 的 插件 都 要 有 这 一 步 才 能 正常 工作 ,在 一 个 无 序列 表 上 应 用 该 插件 时 , .each () 
方法 就 会 过 历 那 个 无 序列 表 的 所 有 项 。 

return this.each(function() { 

)); 

(2) 创建 两 个 变量 o 和 opj。o 引 用 options，obj 引 用 $(this)。 有 了 这 两 个 变量 ， 后 面 
引用 起 它们 来 就 省 很 多 事 。 变 量 opj 中 保存 的 是 包 于 着 当前 无 序列 表 元 素 的 jQuery 对 象 。 

return this.each(function() { 

var o = options; 
var obj = $(this); 

)); 

(3) 接 下 来 我 们 创建 3 个 变量 一 一 pLength、numHidden 和 pList。pLength 是 obj 包 含 全 部 子 
元 素 的 总 数 ，numHidden 由 pLength 减 去 o.numshown ( 这 是 一 个 设置 选项 ) 得 来 。 如 果 pLength 
是 30, 而 o .numShown^$ T 5, 则 numHidgen 的 值 就 是 25。 变量 pList 保 存 着 obj 对 和 象 的 所 有 子 元 素 。 

return this.each(function() { 


var o = options; 
var obj = $(this); 


/ /确定 项 数 并 计算 被 隐藏 项 的 数目 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 
1); 
(4) 再 创建 一 个 变量 shLink， 这 个 变量 保存 着 一 段 HTML 代 码 (一 个 链接 )， 这 段 代 码 用 来 显 
示 控 制 目标 文本 显示 或 隐藏 的 链接 文本 。 E ape AG ete beet nee 并 
且 具 有 一 个 类 .view， 我 们 稍 后 会 详细 解释 这 个 类 。 我 们 用 这 个 链接 控制 目标 文本 的 显示 /隐藏 。 
return this.each(function() { 


var o = options; 
var obj = $(this); 


// 确 定 项 数 并 计算 被 隐藏 项 的 数目 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链接 
var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


bye 


10.5 编写 第 一 个 jQuery 插件 253 


(5) Sum 条 件 语 句 判 断 pLengthn 是 否 大 于 o.numshown， 如 果 大 于 则 在 obj 对 和 象 前 插入 
shLink。 这 在 需 要 时 就 会 把 显 示 / 隐 藏 链接 放 到 当前 无 序列 表 之 前 。 


return this.each(function() { 
var o = options; 
var obj = $(this); 


// 确 定 项 数 并 计算 被 隐藏 项 的 数目 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链接 
var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


if (pLength > o.numShown) { 
jQuery (shLink) .insertBefore(obj) ; 


} 
} 
(6) 然后 对 pList 应 用 一 个 .each()4 送 代 处 理 当前 无 序列 表 的 所 有 子 元 素 。 
return this.each(function() { 

var o = options; 


var obj = $(this); 


/ /确定 项 数 并 计算 被 隐藏 项 的 数目 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链接 
var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


if (pLength > o.numShown) { 
jQuery (shLink).insertBefore(obj); 
} 


pList.each (function (index) { 
1): 
1): 


(7) 在 刚刚 创建 的 .each O 循环 的 回调 函数 中 ,添加 一 个 if/else 条 件 语句 ， nari 
小 于 o .numShown。 如 果 小 于 ， 则 显示 当前 迭代 元 素 ， 否 则 添 一 个 higdgen 类 ,将 其 隐藏 。ingex 
变量 是 该 循环 的 迭代 变量 ， 每 循环 一 次 它 〈 从 0 开始 ) 都 自动 加 1。 


return this.each(function() { 
var o = options; 
var obj = $(this); 


/ /确定 项 数 并 计算 被 隐藏 项 的 数目 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链接 


var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


if (pLength > o.numShown) { 
jQuery (shLink) .insertBefore(obj) ; 
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} 
pList.each (function (index) { 

if (index < o.numShown) { 

jQuery (pList [index] ) .show(); 

} 
else ( 

jQuery (pList [index] ) .hide(); 

jQuery (pList [index] ) .addClass('hidden') ; 


(8) 使 用 .1live() 方 法 为 a.view 绑 定 click 事 件 处 理 函 数 。 在 处 理 函 数 末尾 使 用 return 
false 避 免 触 发 click 事 件 的 默认 行为 ( 重 定 向 )。 同 时 加 一 个 语句 选中 所 有 带 有 .hidden 类 的 元 
素 ， 切 换 其 显示 状态 〈 隐藏 /显示 )。 


return this.each(function() { 
var o = options; 
var obj = $(this); 


// 确 定 项 数 并 计算 被 隐藏 项 的 数目 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链 接 


var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


if (pLength > o.numShown) { 
jQuery (shLink) .insertBefore (obj); 
} 
pList.each(function (index) { 
if (index < o.numShown) { 
//alert('test'); 
jQuery (pList [index] ) .show() ; 
} else ( 
jQuery (pList[index]).hide(); 
jQuery (pList[index]).addClass('hidden'); 
} 
1); 
// 切 换文 本 
jQuery ("a.view").live("click", function(e) { 
jQuery('.hidden') .toggle(); 
return false; 
1); 
1); 


(9) 最 后 一 步 ,添加 一 个 条 件 语句 切换 显示 /隐藏 链接 的 链接 文本 。 用 if 语句 检查 a.view 链 接 
文本 是 否 与 o. showText 相 同 ， 如 果 相 同 ， 则 在 单 击 它 时 将 它 的 链接 文本 变 为 o.hideTrext， 如 果 
不 同 ， 则 在 单 击 它 时 将 它 的 链接 文本 变 为 o. showText。 

return this.each(function() { 


var o = options; 
var obj = $(this); 


/ /确定 项 数 并 计算 被 隐藏 项 的 数目 
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var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链接 


var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


if (pLength > o.numShown) { 
jQuery (shLink) .insertBefore(obj) ; 
} 
pList.each (function (index) { 
if (index < o.numShown) { 
//alert('test'); 
jQuery (pList [index] ).show(); 
} else { 
jQuery (pList [index] ) .hide(); 
jQuery (pList [index] ).addClass('hidden') ; 


} 
1); 
/ /切换 文本 
jQuery ("a.view").live("click", function(e) { 
if (jQuery(this).text()--o.showText) { 
jQOuery(this).text(o.hideText); 
) else ( 


jQOuery(this).text(o.showText); 
} 
jQuery('.hidden') .toggle(); 
return false; 
1); 
} 


下 面 列 出 了 插件 jquery.showhideplugin.js 的 全 部 源 代码 : 


(funcetionm(S)t 
jQuery.fn.showhidePlugin= function(options) { 


// 设 置 默认 值 ， 用 过 号 分 隔 选项 


var defaults = { 
numShown: 10, 
showText : 'Show More Links', 
hideText : 'Hide Links' 
} 
var options = $.extend(defaults, options); 
return this.each(function() { 


var o = options; 
var obj = $(this); 


// 确 定 项 数 并 计算 被 隐藏 项 的 数目 

var pLength = obj.children().length; 
var numHidden = pLength - o.numShown; 
var pList = obj.children(); 


// 设 置 显示 /隐藏 链接 
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var shLink = "<a href='#' class='view'>" + o.showText + "</a>"; 


if (pLength > o.numShown) { 
jQuery (shLink) .insertBefore (obj); 
} 


pList.each (function (index) { 
if (index < o.numShown) { 
jQuery (pList [index] ) .show(); 
) else ( 
jQuery (pList[index]).hide(); 
jQuery (pList [index] ) .addClass('hidden') ; 
} 


1); 
/ [od XA. 
jQuery("a.view").live("click", function(e) { 
if (jQuery (this) .text()==o.showText) ( 
jQuery (this) .text(o.hideText) ; 
) else ( 
jQuery(this).text(o.showText); 
} 
jQuery(' .hidden') .toggle(); 
return false; 
ee 
1); 
} 
}) (jQuery) ; 


插件 现在 完成 了 , 接 下 来 将 它 应 用 到 我 们 的 站 点 上 : 找 一 个 元 素 , 应 该 该 插件 ,看 看 
工作 。 为 此 我 创建 了 一 个 简单 的 无 序列 表 ， 它 包含 十 几 个 列表 项 。 


(1) 准备 测试 插件 用 无 序列 表 的 HTML。 在 这 个 例子 里 ,我 使 用 了 一 个 带 有 .big-1list 类 


的 无 序列 表 。 


<ul class="big-list"> 


li>Test 1.</1i> 
li»Test 2.</1i> 
li>Test 3.</1i> 
li»Test 4.</1i> 
li>Test 5.</1i> 
li>Test 6.</1i> 
li»Test 7.«/li» 
li»Test 8.«/li» 
li»Test 9.«/li» 


li»Test 432.«/li» 
li»Test 23.«/li» 

li»Test 0232.«/li» 
li»Test 2002.«/1li» 
li>Test 541.«/li» 
li»Test 5432.«/li» 
li»Test 542.«/li» 


ANON A^ ^ ANA A^ AAA ^ ^^^ 
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<li>Test 542.«/li» 
<li>Test 342.«/li» 
«li»Test 452.«/li» 
<li>Test 42.«/li» 
«li»Test 542.«/li» 
«li»Test 4542.«/li» 
«li»Test 432.«/li» 
«li»Test 23.«/li» 
<li>Test 0232.«/li» 
<li>Test 2002.«/li» 
</ul> 


(2) 在 页 面 的 头 部 ，jQuery 库 之 后 包含 插件 文件 : 
<script src="js/jquery.showhidePlugin.js" type="text/javascript"></script> 


(3) 用 jQuery 选中 .big-list 元 素 ， 然 后 调用 showhidePlugin() 方 法 。 因 为 我 们 没有 为 
showhidePlugin () 方 法 提供 任何 选项 ， 所 以 showhidePlugin () 会 使 用 默认 设置 。 


$(".big-list").showhidePlugin(); 


(4) 如 果 你 想 改 变 如 图 10-22 所 示 显 示 / 隐 藏 插件 的 显示 ， 只 需要 用 一 个 对 象 字面 量 C 而 非 每 个 
参数 ) 将 需要 改变 的 所 有 默认 参数 传递 给 showhigdePlugin() 方 法 。 


$(".big-list").showhidePlugin(( 
numShown:15, 
showText:"Show FTW" 

ys 


jQuery Show Hide Demo 


(4 *)- GE) CX) he) CL) http://smashingjquery.com/code/chap10/jShowHidev2.htm! wr) Gk a) &- 
(Q Disable + Æ Cookies + |] CSS + ©] Forms + S Images + @ Information + ^. Miscellaneous + ./ Outline + | = Resize + jP Tools + {2) View Source » |j? Options 
Ia jQuery Show Hide Demo + Tw 
Show FTW 


e Test 1. 
e Test 2. í 
Test 3. | 
* Test 4. 
e Test 5. X 
* Test 6. 
e Test 7. 
* Test 8. 
e Test 9. 
* Test 432. 
e Test 23. 
e Test 0232. 
e Test 2002. L 
* Test 541. 
_* Test 5432. , 
FE Console HTML CSS Script DOM | Netv | PageSpeed Page Speed Activity  YSlow eco 


i4 : Clear Persist (€T HTML CSS JS XHR Images Flash 
URL Status | Domain | Size | Timeline 


> GET jshowHidev2.html smashingjquery.com 1.2 KB 182ms | 

> GET jquery.minjs Not Modified ^ ajax.googleapis.com 24.1 KB ERN 750: | 

> GET jquery.oneshowhidi 4 Not Modif smashingjquery.com 2.2 KB EN 577: | 3 

3 requests 27.5 KB (26.3 KB from cache) 326ms (onload: 487ms) 
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10.6 ”如 何 发 布 jQuery 插件 


准备 发 布 插件 时 ， 有 好 几 个 地 方 需要 注意 。 在 正式 放出 你 的 插件 之 前 ， 请 务必 挨个 检查 以 下 


3 点 : 


1239 


a 测试 插件 是 否 在 所 有 浏览 器 下 都 能 正常 工作 , 3 HD Voir BLTRIEÓ , TE7 , IE8 , Firefox , 
Safari、Chrome 还 有 Opera; 

口 写 一 份 文档 解释 选项 的 含义 以 及 插件 的 工作 原理 ; 

口 如 果 你 愿意 开放 该 插件 的 源 代码 , 就 到 开放 源 代码 官方 站 点 (www.opensource.org/licenses/ 


index.html ) 为 插件 选择 一 份 开源 许可 协议 。 


10.6.1 


打包 插件 以 便 发 布 


打包 前 请 一 定 确认 插件 代码 可 用 于 生产 环境 。 你 可 以 使 用 Douglas Crockford 的 代码 压缩 器 、 
JavaScript Packer ( http://jscompress.com/ ) 等 代码 压缩 工具 最 化 小 你 的 代码 ( 参见 图 10-23 )。 最 小 
化 技术 可 删除 代码 中 不 必要 的 字符 ， 比 如 注释 、 换 行 符 、 多 余 的 空格 和 制 表 符 ， 因 此 能 (通过 减 
小 代码 体积 ) 加 快 代码 加 载 。 同 时 提供 开发 版 (未 压缩 代码 ) 和 压缩 版 代码 总 是 一 个 好 主意 。 如 


果 你 的 扣 


习惯 。 


; 5 T "a 
@ Disable + Æ Cookies + |. CSS + =] Forms + M Images + @ Information * Miscellaneous Mr Outline * S5 Resize 


1 rx 
口 Minify Javascript Online / Online J... | + 


上 件 非常 小 ( 未 压缩 时 小 于 4 KB )， 压 缩 就 不 是 必需 的 ， 不 过 在 发 布 前 压缩 代码 对 我 已 是 


Minify Javascript Online / Online JavaScript Packer 


4)*)- (€) ( ft) CL) C http://jscompress.com/ wy) Gk Q) ir 


Tools + $>) View Source * SD Options 


Online Javascript Compression Tool 
Minify Javascript Online / Online Javascript Packer 


What's On Now | Copy/Paste JavaScript Code Upload Javascript Files — @ What Is This? 


Javascript Code Input 


Copy/paste your javascript code in the box below 


Hor 
How to Protect Home 
Peg From Water Damage 


How Diet Affects 
Rheumatoid Arthritis 
Pain 


W. | How Diet Affects 


Rheumatoid Arthritis 
Pain 


Javascript Compression Method 


(@ Compress Javascript Minify USMin) . 


Credits: algorithm by Douglas Crockford | method by Dean Edwards 


ive 
[iz Transferring data from o.aolcdn.com. 


Douglas Crockford 负 责 JSMin 算 法 | Dean Edwards 负 责 压缩 方法 | Vance Lucas 负 责 JavaScript 压 缩 工 具 / 服 务 


图 10-23 Douglas Crockford 的 最 小 化 代码 脚本 
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10.6.2 ”发 布 插件 


你 可 以 将 自己 的 插件 发 布 到 一 些 站 点 , 一 方面 可 知道 这 插件 是 否 很 成 功 , 另 一 方面 也 是 对 开 
源 社区 的 回报 。 如 果 你 的 插件 是 开源 的 ， 我 强烈 建议 把 它 发 布 在 以 下 地 方 。 

口 jQuery 插件 子 站 jQuery 官方 站 点 提供 了 一 个 wiki (http://plugins.jquery.com/ )， 在 那里 开 
发 者 可 以 提交 自己 的 代码 。 你 可 以 通过 浏览 器 上 传 插件 ， 也 可 以 通过 版 本 控制 工具 ( 比 
如 Subversion 或 Git ) 上 传 。 在 那儿 你 可 以 为 上 传 的 插件 指定 一 个 名 字 及 相应 的 描述 , 也 可 
以 回复 用 户 提 交 的 bug 报 告 ， 还 可 以 查看 社区 对 该 插件 的 评级 ， 发 表 插 件 文档 等 。 

OQ 谷歌 的 项 目 托管 站 点 ”Google Code ( http://code.google.com/hosting/ ) 提供 的 服务 类 似 于 
jQuery 插件 子 站 。 除 了 便利 的 服务 之 外 ， 把 插件 托管 到 Google Code 最 大 的 好 处 是 : 因为 
服务 提供 商 是 谷歌 ， 所 以 几乎 没有 流量 限制 。 


jQuery 在 移动 Web 开 发 中 的 


应 用 


我 们 可 以 在 任何 网 站 或 应 用 中 使 用 jQuery， 移 动 Web 应 用 也 不 例外 。 手 机 有 屏幕 大 小 和 带宽 
限制 ， 这 些 限制 在 移动 Web 开 发 过 程 中 要 始终 牢记 在 心 。 移 动 Web 应 用 既 可 以 是 通过 浏览 器 或 移 
动 设备 访问 的 纯 Web 应 用 ,也 可 以 是 原生 的 Web 应 用 程序 。 

在 本 章 中 ,我 将 解释 移动 Web 站 点 与 原生 移动 应 用 二 者 的 不 同 ， 讨 论 CSS3 和 HTML5 为 移 
动 Web 开 发 带 来 的 益处 ， 并 告诉 大 家 如 何 安 装 和 设置 ( 适用 于 Google Android 及 苹果 移动 设备 
的 ) 移动 浏览 器 模拟 器 。 最 后 ， 我 将 和 大 家 一 起 看 看 jQuery Mobile Alpha 为 移动 Web 开 发 带 来 
了 什么 好 处 。 


11.1 使 用 jQuery 构建 移动 Web 应 用 


开发 移动 Web 应 用 有 好 几 条 途径 可 选 。 移 动 Web 应 用 市 场 似 乎 高 度 集中 于 两 大 平台 一 一 Apple 
iPhone/iPad 和 Google Android. 

31i WEJT HAS AE PPS DIT] V8, at FE] Web? i3 8X JW FH EIEN 1B, AN ME Ae LAS I Web FF Ac EU TAT 基 
于 浏览 器 的 ) 开发 困难 得 多 。 对 jQuery 开发 者 来 说 ， 移 动 Web 开 发 还 是 一 个 相当 新 的 领域 。 这 主 
要 是 因为 市 面 上 流行 的 手机 中 ， 大 部 分 对 JavaScript 的 支持 很 差 。 不 过 苹果 的 iPhone 和 谷歌 的 
Android 智 能 手机 的 浏览 器 拥有 强大 的 功能 ， 为 这 些 平台 开发 应 用 最 容易 。 

下 面 是 移动 开发 的 两 个 小 穹 门 。 
口 开发 之 前 定义 目标 用 户 。 也 就 是 事先 确定 该 应 用 的 目标 人 群 。 这 些 人 使 用 哪些 平台 ” 他 
们 在 这 些 平台 上 使 用 什么 浏览 器 ?他 们 使 用 Wi-Fi 还 是 蜂窝 式 网 络 ? 
口 让 站 点 或 应 用 保持 简单 。 注 意 ， 移 动 设备 带宽 有 限 ， 屏 幕 通常 也 比较 小 。 
图 11-1 展 示 的 是 Roanoke 学 院 站 点 的 移动 版 ， 它 是 一 个 为 Phone 浏 览 器 设计 站 点 的 好 例子 ， 
使 用 了 jQuery 框架 ， 用 其 Ajax 方 法 $ .1oad() 载 和 内容。 它 还 使 用 了 一 个 jQuery 插件 ， 以 类 似 幻 灯 
片 的 方式 展示 该 学 校 近期 的 一 些 图 片 。 
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图 11-1  Roanoke 学 院 站 点 移动 版 ， 使 用 了 jQuery 框架 


11.2 ”移动 浏览 器 


多 年 前 ， 桌 面 上 发 生 了 一 场 激 烈 的 浏览 器 大 战 ， 战 火 绵 延至 今 ， 这 场 战 争 发 生 在 Internet 
Explorer, Mozilla Firefox, Apple Safari 、Opera， 还 有 新 来 者 Google Chrome 之 间 。 一 场 类 似 的 战 
"aceti 不 同 的 移动 浏览 器 有 着 不 同 的 身手 。 不 过 随 着 移动 Web 应 用 市 场 的 繁 

， 不 同 的 浏览 需 将 会 支持 更 多 相同 的 功能 。 

不 必 写 一 行 原 生 移动 平台 代码 ， 我 们 就 能 使 用 熟悉 的 HTML、CSS 和 jQuery 工具 开发 移动 济 
览 器 应 用 。 苹 果 公司 的 让 hone iOS 和 谷歌 的 Android 这 两 大 智能 手机 平台 , 分 别 内 建 了 相当 先进 的 
移动 浏览 器 。 这 些 设备 对 HTML5、CSS3 和 JavaScript 的 支持 情况 见 表 11-1。 原 生 应 用 程序 是 为 手 
机 操作 系统 开发 的 软件 。 相 对 于 Web 站 点 或 Web 应 用 来 说 ， 原 生 应 用 确实 有 极 大 的 优势 ， 不 过 我 
们 在 浏览 器 平台 上 一 样 能 开发 出 有 价值 的 东西 。 如 果 你 有 开发 桌面 Web 应 用 的 经 验 ,， 那 就 更 没有 
问题 。 


表 11-1 移动 浏览 器 的 功能 
HTML5 CSS3 JavaScript 


Apple Safari 5 

Google Android ( Chrome ) 
Mozilla Firefox Mobile 
Opera 10 Mobile i 


D Bm pm Bu 
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如 表 11-1 所 示 ，Safari 、Chrome Firefox Mobile 对 最 新 技术 均 有 着 良好 的 支持 ， 其 中 Safari 
和 Chrome 要 优 于 Firefox Mobile， 因 为 它们 分 别 是 让 hone 和 Android 的 默认 浏览 器 。 在 谷歌 Android 
和 苹果 让 hone 平 台 上 也 可 以 下 载 到 Opera 10 Mobile 浏 览 器 。 

这 两 大 平台 都 支持 CSS3 和 HTML5。 如 果 你 还 没 听 说 过 这 些 高 级 Web 设 计 技 术 ， 这 次 就 能 大 
饱 眼福 了 ! 由 于 它们 关系 相当 密切 ， 人 们 在 提 到 CSS3 的 时 候 ， 几 乎 一 定 也 会 提 到 HTML5。 不 过 ， 
这 两 项 技术 之 间 有 着 许多 不 同 。 


11.2.1 CSS3 


CSS3 (也 就 是 层 释 样 式 表 3 ) 早 在 2005 年 12 月 就 开始 开发 了 。 现 在 ， 越 来 越 多 先进 的 浏览 
( 比如 Apple Safari 4, Google Chrome, Microsoft IE 9, Opera 10， 还 有 Firefox 4 ) 开始 支持 CSS3。 
随 着 这 些 浏览 器 占领 越 来 越 大 的 市 场 份额 ，CSS3 也 逐渐 成 为 主流 。 现 在 ， 我 们 能 够 利用 这 些 技 
术 在 iPhone 和 Android 平 台 上 构建 移动 Web 站 点 了 。 使 用 CSS3 这 种 最 新 、 最 优 的 技术 开发 移动 Web 
站 点 和 应 用 的 经 验 不 仅 能 提高 你 的 技术 水 平 , 为 你 的 简历 添上 精彩 一 笔 , 还 能 增进 你 对 移动 开发 
限制 的 理解 。 

下 面 列 出 了 CSS3 提 供 的 一 些 新 属性 ,要 查看 更 完整 的 新 属性 列表 , 可 访问 www.css3.info ( 参 
见 图 11-2 )。 这 些 属 性 特别 适用 于 移动 设备 ， 要 知道 在 过 去 需要 综合 应 用 图 片 、CSS 变 通 方案 和 
JavaScript 才 能 实现 这 些 效果 , 并 且 这 些 技术 会 因为 增加 页 面 的 体积 造成 性 能 低下 。 使 用 这 些 CSS 
属性 ， 能 有 效 地 保障 移动 Web 站 点 和 应 用 的 性 能 。 


CSS3 . Info - All you ever needed to know about CSS3 
@b- © @ @® (BAC http: /www.css3.info/ 


@ Disable + Æ Cookies + I CSS + Č Forms + M Images + @ Information * | ^ Miscellaneous * ../ Outline 
CSS3 . Info - All you ever needed t... | 4 


"*CSS .info 


EVERYTHING YOU NEED TO KNOW ABOUT CSS3 


— CSS Working Group sets out Priorities for & by Chris 
Sep; 1 


osted in Modules, News, W3C # Permanent link | @ Add comments (12) 


The CSS Working Group met in Oslo last month for three days of face to face meetings. 
The minutes, available on the CSS Working Group's blog, reveal discussions around CSS2.1, several 
C553 modules, a rough draft of the Working Group's priorities for 2010 and even taking Microsoft to 
task over their controversial test results published earlier this year. 


Read More » 


CSS3 Rocks & by Chris 
Posted in CSS3 Previews, CSS3 Resources, News # Permanent link | @ Add comments (9) 
Google have recently updated their HTMLSROCKS site, originally launched in June this year, with 
numerous new demos and tutorials for HTML5 and CSS3. The latest update adds, amongst other 
articles, a tutorial for CSS3 Web Fonts (with @font-face) and a new ‘HTMLS5 Studio’ - offering a 
number of live demos for many of the new possibilities offered by HTML5 and CSS3. 


Since being updated the site has been causing quite a stir online and if you've not come across the 


© 2009, WEBFLUX 


图 11-2 CSS3 资 源 站 CSS3.info 
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口 Border Radius ”使 用 CSS 创 建 圆 角 效果 ( 参见 图 11-3 )。 
口 Border Image 使 用 图 片 创建 边框 。 
口 Border Shadow ”使 用 CSS 生 成 阴影 效果 。 
口 Multiple Backgrounds ”使 用 更 少 的 代码 支持 多 重 背景 ， 并 用 CSS 声 明 一 个 多 重 背 景 定位 
属性 。 
口 New Color Options (不 同 于 RGB 和 16 进 制 的 ) 新 的 颜色 选项 ， 提 供 真 透明 支持 。 
口 Text Shadow ”为 文本 元 素 创建 阴影 效果 。 

如 果 你 想 了 解 CSS3 的 所 有 新 功能 及 特性 ,请 访问 www.css3.info/preview/。 顺 便 说 一 下 , jQuery 
支持 CSS3 选 择 器 。 


mil Carrier > 11:14 PM 


Quen 


smashingjquery.com/code/chap09/aja... ( 


图 11-3 iPhone 模拟 器 中 CSS3 Border Radius 属 性 的 效果 


11.2.2 HTML5 
HTML5S 的 开发 始 于 2008 年 1 月 , 这 些 年 来 逐步 得 到 了 主流 浏览 器 的 支持 。 下 面 列 出 了 HTML5 
提供 的 部 分 特性 : 
a 00000 wei ooo00 
E m 0000000HTML500000 
口 header 和 footez 标 签 ， 使 内 容 得 以 更 好 地 组 织 ， To ooa ao E PEDI DET 
而 不 必 再 依赖 aiv 标 签 ; 


D 0 0 HTMLES[] css3g 0 D D D 
000000 Web n üt 
D 


O audio/videotpS ; 
口 canvas 标 签 ， 动 态 创建 图 片 或 图 画 ; 
口 地 理 定 位 API ( Geolocation API )。 


11.2.3 ”移动 开发 的 必要 装备 
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iPhone。 为 了 方便 (测试 )， 你 可 以 购买 一 部 Android 手 机 和 一 部 iPhone， 但 这 要 花费 大 量 的 金钱 ， 
还 要 投入 很 多 的 时 间 。 其 实 大 可 不 必 这 样 做 , 苹果 和 谷歌 这 两 家 公司 都 提供 了 开发 者 门户 网 站 和 
包含 模拟 需 的 开发 工具 包 (SDK )。 所 谓 模 拟 需 就 是 一 个 桌面 程序 ， 它 模拟 一 台 真 实 的 Android 或 
iPhone 设备 ， 既 可 用 来 测试 原生 应 用 ， 也 可 测试 Web 应 用 和 网 站 。 

1. 下 载 Apple iPhone Safari 桌 面 模拟 器 

TEdeveloper.apple.com/devcenter/ios/index.action 可 下 载 苹果 的 Safari 模 拟 咒 。 需 要 先 在 Apple.com 
开发 者 门户 注册 成 为 开发 者 ， 你 才能 下 载 并 安装 让 hone 模 拟 器 。 模 拟 器 安装 好 之 后 ， 你 就 可 以 用 它 
通过 Safari 浏 览 任何 网 站 ， 就 像 手 里 拿 着 一 个 真正 的 Phone 一 样 (参见 图 11-4 )。 


-lll Carrier > 11:04 PM 


Photos 


图 11-4 苹果 iPhone Safari 桌面 模拟 器 


2. 下 载 Google Android 桌 面 模拟 器 

nf P} M developer.android.com/sdk/index.html 9i [il F Google Android 模 拟 器 。 下 载 并 安装 好 
Android Chrome 模 拟 器 之 后 , 你 就 可 以 用 它 通 过 Chrome Mobile 浏 览 任何 网 站 , 就 像 手 里 拿 着 一 个 
真正 的 Android 手 机 一 样 ( 参见 图 11-5 )。 
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图 11-5 Google Android 桌 面 模 拟 器 
11.2.4 面向 Apple iPhone Safari 移 动 浏览 器 的 开发 


为 iPhone Safari 浏 览 器 开发 Web 站 点 或 应 用 真 的 非常 爽 ， 这 得 益 于 Safari 浏 览 咒 棱 极 了 的 性 能 
(参见 图 11-6 )。Safari 支 持 CSS3 和 HTML5， 因 此 你 该 知道 刚才 我 为 什么 那么 激动 了 。 非 要 说 它 不 
好 的 地 方 , 那 就 是 只 有 包含 Safari Mobile 在 内 的 少数 几 款 浏览 器 支持 CSS3 和 HTML5, 因此 有 时 候 
不 得 不 在 支持 哪些 特性 和 移动 设备 方面 花 点 心思 。 
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图 11-6 苹果 公司 iPhone 手机 上 的 Safari 游 览 器 和 Web 应 用 i 


2007 年 6 月 ， 当 苹果 公司 的 iPhone 首 次 发 布 时 ，iPhone 还 没有 一 个 原生 应 用 程序 。 那 时 候 Web 
应 用 程序 独 领 风骚 ,苹果 公司 为 此 还 专门 在 iPhone 站 点 上 开辟 了 一 个 区 域 , 展示 那些 精心 为 iPhone 
开发 的 Web 应 用 (参见 图 11-7 )。 
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Apple - Web apps - All Categories 
> CE) GD GA) LY http: jwww.apple.com/webapps/ 


@ Disable * / Cookies + J css + 回 Forms + 3 Images * @ Information + 
LE Apple - web apps - All Categories [JF 


Browse Web Apps View: MTTP Most popular Alphabetical Staff picks [RSS] 


Calculate. All Categories: Most recent 


Entertainment. us 1 415 Next> 


Miscellaneous + ,/ Outline * Š$ Resize * jP Tools + $>) View Source = +> Options 


Games 
News 


Productivity 
Search Tools 
Social Networking 


Closest House For Sale 
About Closest House For Sale What are web apps? 


Allows you to find houses for sale right in the Learn what they are 


Sports palm of your hand. From your IPhone, Pod A and how to use them. » 
Travel Touch, or iPad you can easily browse the 
Utilities = closest houses for sale. No download needed. 
washes Houses Close To Me [bel Code This web app is free, Just visit recu 
Houses By Zip Code ABP Works ClosestHouseForSale.com ela 
= Here's how to 
How This App Works create your own. » 
Contact Us Pom 
Company: Twin Design Submitting 
URL Closest House For Sale Applications 
How to submit 
Post Date: 09/20/2010 yo ti a 
Feedback 
Help us improve 
our web apps S 
library. » 
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B ee | 
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图 11-7 Apple iPhone Web 应 用 


为 促进 原生 应 用 和 Safari Web 应 用 的 发 展 ， 苹 果 公 司 在 创建 开发 者 门户 网 站 上 下 足 了 工夫 。 
在 进行 开发 之 前 ， 我 极力 推荐 你 访问 Safari 开 发 中 心 (Safari Dev Center， 参 见 图 11-8 )。 开 发 中 心 
提供 了 视频 、 技 术 文 档 以 及 示例 代码 ， 帮 助 我 们 学 习 为 iPhone 开发 Safari Web 应 用 程序 。 


Safari Dev Center - Apple Developer > 


(te) ED (x) GA) CAL hup; /developer.apple.com/devcenter] safari/index action. wy) Gh c a) wr 
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P J 
[3 safari Dev Center - Apple Develo. IB 


@ Developer 


Technologies Resources Programs Support Member Center 


Safari Dev Center 


Hi, Guest | Register | Log In 
Safari on iOS, Mac OS X, and Windows » Safari Reference Library D sti Developer Program 
: Safari 5 CI (Free Download Join the Safari Developer Program 
Free download for Mac and PC. Rd s 
he free Safari Developer Program 
) pr ov feat includes all the tools and resources for 


the world's most innovative. 
web browser. 


Development Resources 


B Safari Web Development Videos 
Watch Apple experts discuss a range of topics 
on developing powerful websites and web apps 
for Safari. ii 


Safari Reference Library 
Select from a wealth of technical documentation 
and guides on web development for Safari. 


Related Downloads 
@ Safari 4 Downloads and Updates » 


Featured Content 


Safari Extensions [CD 


Safari Extensions Reference 


Safari Extensions Development Guide 


Safari Extensions Conversion Guide 
Contacts Safari Extension 
Messages Safari Extension 


Blocker Safari Extension 


creating extensions that enhance and 
customize Safari. 


Program members have access to 
sample code, developer forums and 
Safari Extension Signing certificates. 
Join now » 


Fo 


Already a Safari Developer Program 
Member? Log in » 


区 Done 


图 11-8 Safari Dev Center 
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11.2.5 面向 Google Android 的 Chrome 浏 览 器 的 开发 


为 Android 上 的 Google Chrome 浏 览 器 (参见 图 11-9 ) 开发 移动 应 用 一 样 激动 人 心 ， 因 为 它 也 
支持 CSS3 和 HTML5。Android 也 支持 jQuery， 因 此 桌面 Web 站 点 或 应 用 的 代码 能 非常 容易 移植 到 
移动 项 目 。 


ooo 5554:Droid 


DMS 11:355 
http://www.google.com/.. 加 


Web Images Local News more » ® 


Google 


Sign in 
iGoogle Settings Help 


图 11-9 Google Android Chrome 浏 览 


谷歌 为 打造 一 个 卓越 的 开发 者 门户 网 站 费 尽心 血 , 类 似 于 iOS 开 发 中 心 , 谷歌 也 提供 了 视频 、 
技术 文档 、 代 码 示例 以 及 论坛 。Google Android 开 发 中 心 (参见 图 11-10，http:/ developer.android. 
com/index.html ) 提供 了 相当 丰富 的 信息 , 在 开始 任何 Web 应 用 开发 工作 之 前 , 绝对 应 该 先 浏览 一 
下 这 些 信息 。 


Android Developers 


PE) GAL hitp://developer.android.com/index. html 


(4) >)- (eC 
@ Disable + Æ Cookies + -css * =] Forms + 
a Android Developers J 


developers 


SDK 


Dev Guide 


Reference 


MESA Download 
Developer Announcements a The Android SDK has the 
tools, sample code, and docs 
Thanks to everyone who visited us at Google I/O in you need to create great apps 
Google aue) K San Francisco! Stay tuned for videos and sides 
from the Android sessions, which will be posted at Leam more » 


the Google I/O web site. 


eam more » Publish 
Android Market is an open 


service that lets you distribute 
your apps to handsets. 


Get Android 2.2! 
Learn more » 
The Android 2.2 platform is now available for 
the Android SDK, along with new tools, - 
documentation, and a new NDK. For Contribute 
rion about new features and APIs, read Ardrad Open Son Project 
ie version notes. gives you access to the entire 


If you have an existing SDK, add Android 2.2 platform source. 
as an SDK component. If you're new to 
Android, install the SDK starter package. 


4n 


Leam more » 


Target Devices 
The Device Dashboard 


provides information about 
~ m doped Ando dcs to 


I Done FB vsiow 


e 


© 2010, Google ( www. android. com ) 
图 11-10 Google Android 开 发 中 
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11.2.6 ”在 不 同 智 能 手机 上 显示 不 同 内 容 


使 用 Web 服 务 器 的 URL 重 写 功 能 ， 我 们 可 以 探测 用 户 使 用 的 是 桌面 浏览 器 还 是 移动 浏览 器 ， 
然后 把 用 户 重 定向 到 专门 为 该 平台 开发 的 站 点 。 下 面 的 代码 演示 了 如 何 为 不 同 的 移动 平台 进行 重 
定 问 。 每 一 行 都 使 用 了 一 个 重 写 规则 来 检查 用 户 代理 , AAC iPhone, RAE Android, 一 旦 
匹配 成 功 , 用 户 就 会 被 重 定向 到 适合 他 手机 的 移动 站 点 。 这 些 代 码 使 用 了 Mod_rewrite 模 块 支持 
的 正则 表达 式 语法 ， 为 不 同 的 移动 平台 设置 不 同 的 规则 。 

在 使 用 以 下 代码 之 前 , 你 需要 确认 使 用 的 Web 服 务 器 是 否 是 Apache 目 已 启用 Mod_rewrite 模 
块 。 如 果 站 点 使 用 的 是 Windows 服 务 器 ， 尽 管 可 以 通过 谷歌 搜索 服务 找到 替代 方案 ， 但 最 好 还 是 
问 间 你 的 Web 主 机 提供 商 ， 他 们 能 够 为 你 指出 正确 方向 。 


RewriteCond $(HTTP USER AGENT) ^.*iPhone.*$ 

RewriteRule ^(.*)$ http://iphone.yourdomain.com [R-301] 
RewriteCond $(HTTP USER AGENT) ^.*BlackBerry.*$ 
RewriteRule ^(.*)$ http://bb.yourdomain.com [R-301] 
RewriteCond $(HTTP USER AGENT) ^.*Android.*$ 

RewriteRule ^(.*)$ http://android.yourdomain.com [R-301] 


11.2.7 ”使 用 jQuery 开发 移动 站 点 和 应 用 程序 


在 为 移动 设备 开发 Web 站 点 或 应 用 程序 时 ， 我 们 可 以 像 开发 桌面 Web 站 点 或 应 用 一 样 将 
jQuery 集成 进 我 们 的 项 目 。 只 要 移动 平台 支持 JavaScript， 到 现在 为 止 我 在 前 面 各 章 提 到 的 jQuery 
功能 都 能 工作 。 


11.3 jQuery Mobile 预览 版 介绍 


jQuery 团队 已 经 发 布 了 jQuery Mobile 插 件 (http:/querymobile. com ) 的 Alpha 版 本 (参见 图 
11-11 )。 有 关 它 的 讨论 和 小 道 消息 不 断 在 jQuery 社区 传播 。 会 有 一 个 单独 的 jQuery Mobile 库 吗 ? 
没 错 ， 它 是 一 个 大 约 6KB 大 小 的 独立 插件 ， 要 先 包含 jQuery 库 ， 再 包含 它 方 可 使 用 。 它 将 支持 哪 
些 平台 ? Apple iOS, Google Android, Blackberry, bada, Windows Phone, Symbian, Palm webOS, 
还 有 MeeGo。 访问 http://jqueymobile.com/gbs/ 可 查阅 完整 的 兼容 性 列表 。 它 体积 有 多 大 ?未 压缩 
的 开发 版 本 约 86 KB ， 最 小 化 之 后 为 12 KB。 

为 jQuery Mobile 现 在 还 是 Alpha 版 本 ”"，bug 或 问题 在 所 难免 ,但 是 从 已 经 发 布 的 支持 级 别 
及 特性 列表 来 看 ， 它 的 前 景 相当 不 错 。 


(D 翻译 到 这 儿 时 BETA3 已 经 发 布 。 
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jQuery Mobile | jQuery Mobile 


Gn- Ce. = http:/ /jquerymobile.com/ Buck 


@ Disable Cookie: CSS + E] Forms * $ Image: Information + |? Miscellaneous + of Outline + > Resize + j” Tools 
TE ges 2 es 


图 jQuery Mobile | jquery Mobile [PF 


jQuery Ul Mobile Meetups Forum Events About Donate 


jQuen Y Docs and Demos Download Platforms ^ Contribute Forum 


k 


Blog 


jQuery Mobile: Touch-Optimized Web « jQuen Y . 


Framework for Smartphones & Tablets 


A Touch-Optimized Web Framework for Smartphones & Tablets 


Aunified user interface system across all popular mobile 
device platforms, built on the rock-solid jQuery and 
jQuery UI foundation. Its lightweight code is built with 
progressive enhancement, and has a flexible, easily 
themeable design. Alpha Release Notes © Features 


Introduction to jQuery Mobile 


Accessibility 
Supported platforms 


Theme system 


Project Goals and Strategy 


Components 
Seriously cross-platform & cross-device Pages & dialogs 
jQuery mobile framework takes the "write less, do more" Toolbars 


mantra to the next level: Instead of writing unique apps for mem 


© 2010, jQuery Ji E 


图 11-11 jQuery Mobile 首 页 


11.4 ”移动 框架 


移动 框架 与 JavaScript 库 类 似 ， 它 们 提供 一 系列 API， 这 些 API 负 责 与 开发 面向 的 移动 设备 通 


信 。 有 眼下 jQuery 只 支持 Appcelerator Titanium 和 jQTouch 移 动 框架 


11.4.1 Appcelerator Titanium 框 架 


Appcelerator 发 布 于 2008 年 12 月 ,是 一 个 用 于 创建 移动 和 桌面 应 用 的 开发 框架 ( 参见 图 11-12 )。 
使 用 这 个 框架 ， 你 可 以 使 用 HTML 、CSS 和 JavaScripUjQuery 技 术 ， 为 Apple iPhone, Apple iPad, 


Google Android 和 黑 侮 手机 开发 移动 应 用 。 
Appcelerator Titanium Mobile 支 持 以 下 特性 : 


口 多 媒体 支持 ， 在 真实 设备 上 支持 照片 、 音 乐 和 视频 流 ; 

O 支持 存 取 本 地 文件 ， 即 支持 在 设备 上 访问 文件 和 储存 文件 ， 
能 让 应 用 可 在 无 网 络 连 接 时 使 用 ; 

口 访问 移动 设备 的 照相 机 和 摄像 头 ， 以 创建 交互 式 应 用 ; 


OQ 支持 HTML5 和 CSS3。 


O 支持 地 理 定位 ， 通 过 GPS 创建 使 用 地 理 位 置信 息 的 应 用 程序 ， 进 一 


口 让 应 用 使 用 原生 用 户 界 面 ， 这 样 用 户 就 会 对 你 的 应 用 有 似曾相识 之 感 


一 能 提高 应 用 程序 性 能 ， 二 


步 扩展 用 户 体验 ; 
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Titanium Mobile Application Development | Appcelerator 


Ww xJ)- (C) (CX) Gf) A _ http: / /www.appcelerator.com/ products /titanium-mobile-application-deve GJ Yy Y ) (2 Coogle Qa) wr 


@ Disable * Æ Cookies + |. CSS + E] Forms + |E Images + 
| A Titanium Mobile Application Deve... [EF 


@ Information + C3 Miscellaneous + 47 Outline ~ 72 Resize + g Tools + $>) View Source * > Options 


Avappcelerator® PRICING | SUPPORT | LOGIN | 


PRODUCTS 


Titanium Mobile Download Titanium | learn move 


Home > Products > Titanium Mobile 


Native iPhone and Android Applications Rock 


You've got the ideas, now you’ve e the power. Titanium translates your hard 
won web skills into native applications that perform and look just like they 
were written in Objective-C [iPhone and iPad] or Java [Android]. With over 
300 APIs, a thriving developer community, and the support you need, you can 
build applications that are more social, local, media rich, interactive, and 
extensible. 


E Done FB Yslow a 
© 2008 ~ 2010, AppceleratorZrH]; Appcelerator 是 注册 商标 ， 网 站 为 www. appcelerator. com 


图 11-12 Appcelerator Titanium Mobile 官 方 网 站 


访问 www.appcelerator.com/products/titanium-mobile-application-development/ 可 获取 完整 的 功 
能 列表 。 写 到 这 里 时 ( 2010 年 秋天 ), Appcelerator 已 经 拥有 4900 个 应 用 ， 且 据 称 其 支持 社区 拥有 
超过 75 000 名 开发 者 。Appcelerator 取 得 成 功 的 原因 之 一 是 ,， 它 是 一 个 开源 项 目 ， 对 那些 缺乏 坚实 
编程 技术 的 Web 设 计 人 员 来 说 ， 使 用 自己 熟悉 的 技术 创建 应 用 程序 真 的 是 相当 容易 。 

Appcelerator Titanium Mobile 不 是 为 那些 纯粹 的 菜鸟 准备 的 ， 但 它 的 确 提供 了 技术 支持 并 有 
相当 棒 的 在 线 文 要 ， 有 了 这 些 支 援 ， 新 手 就 很 容易 起 步 。 


11.4.2 jQTouchiüfft 


jQTouch 是 一 个 开源 的 jQuery 插件 ,支持 在 为 Phone 开发 Web 应 用 时 模仿 iPhone 原生 系统 的 一 
些 功能 ， 如 动画 、 导 航 、 主 题 等 ( 参见 图 11-13 )。jQTouch 支 持 用 HTML 、CSS 和 jQuery 实现 这 些 
功能 。 

最 近 jQTouch 被 Sencha 收 购 ,成 为 了 Sencha Touch 应 用 程序 的 一 部 分 ( 参见 图 11-14 )。Sencha 
Touch 是 一 个 基于 HTMLS 的 移动 应 用 框架 ， 能 使 我 们 为 Apple iOSfilGoogle Android 创 建 Web 
应 用 。 
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jQTouch — jQuery plugin for mobile web development 


4j- fh) ( http://jqtouch.com/ wv) ( 


Resize + 


@ Disable * Æ Cookies + 器 CSS + Forms + Œ Images  @ Information * Miscellaneous + .. Outline 


[) jQTouch — jQuery plugin for mob... | + 


jQTouch 


User Interface 
AJAX 
Callback Events (+) Download © Preview 


Demos 


es (Now Beta 2!): 


signup! 
Twitter the blog 


SHARE THIS PAGE about 2 days ago @Owenke 
(Gi) Transferring data from av.vimeo.com 


© 2009 ~ 2010, David Kaneda 


图 11-13”jQTouch 官 方 网 站 


Sencha - Sencha Touch Overview - Mobile Web App Development for Android & iPhone 


* Gy Pe) (Sb http: //www.sencha.com/products/touch/ Bur) ( Q . 

@ Disable * Æ Cookies + |. CSS + 回 Forms + 3* Images + @ Information + ^^ Miscellaneous + , Outline + Ī Š Resize + g Tools + {2) View Source * |j? Options 
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Ñ Sencha - Sencha Touch Overview + = 


§ Sencha 


Home Products Support Training 


a Anim; 


Company Biog Store 


Home » Products » Sene 


Sencha Touch 1.0 


‘Sencha Touch, the first HTML5 mobile JavaScript 
framework that allows you to develop mobile web apps 
that look and feel native on iPhone and Android 
touchscreen devices, has just hit the big 1.0. 


And best of all, it's completely free to use. 


Download Sencha Te 


Overview Demos License 


Who’s Using Sencha Touch? 


Since its initial launch, Sencha Touch has quickly become the gold standard for 
developing rich mobile web applications with HTML5. And now, we're making it available 
Se free of charge for commercial or use under the GPL. 


新 Wa vstow 


© 2006 ~ 2010, SenchaZS F] 


图 11-14 Sencha Touch 官 方 网 站 


jQuery 资源 


互联 网 上 有 太 多 专注 于 jQuery 框架 的 官方 / 非 官 方 站 点 和 线 上 资源 。jQuery 官 方 站 点 提供 了 
API 查 询 、 框 架 下 载 及 bug 追 踪 等 功能 , 这 些 功能 很 有 用 , 但 官方 网 站 提供 的 其 他 功能 则 不 够 出 彩 。 
与 jQuery 官方 网 站 相 比 ，jQuery 社 区 则 是 一 个 无 价 的 资源 宝库 ， 极 其 有 效 地 弥补 了 官方 网 站 的 不 
足 ， 提 供 了 大 量 的 教程 、 代 码 示例 、 揪 件 等 。 本 章 ， 我 们 将 一 起 回顾 jQuery 所 有 官方 的 和 非 官方 
的 资源 。 

即便 读 完 了 这 本 书 ， 我 们 仍 应 不 断 学 习 jQuery 技 术 。jQuery 社 区 是 如 此 庞大 ， 而 且 每 天 都 在 
增长 。 如 果 用 Google 搜 索 jQuery， 会 看 到 1800 万 条 结果 ， 并 且 这 个 数字 每 时 每 刻 都 在 增长 。 每 个 
早晨 ， 我 都 阅读 Popurls ( popurls..om )， 它 聚合 了 像 Digg ( www.digg.com ) Delicious 
( www.delicious.com ), RedDit ( www.reddit.com ), Twitter ( www.twitter.com ) 这 样 的 著名 站 点 的 
优秀 内 容 ， 还 支持 很 多 其 他 社交 社区 。 几 乎 每 一 天 ， 我 都 会 读 到 至 少 一 条 有 关 jQuery 某 个 功能 的 
头条 新 闻 。 没 错 ，jQuery 是 一 个 相当 热 的 主题 。 


12.1 jQuery 的 快速 成 长 


jQuery 的 成 长 让 人 印象 深刻 。 不 久 以 前 ， 它 的 用 户 还 只 有 一 小 撮 儿 ， 现 在 连 谷歌 、 微 软 这 样 
的 公司 都 在 支持 它 , 而 且 还 有 很 多 很 多 其 他 的 公司 (参见 图 12-1 ), 支持 jQuery 的 站 点 正在 爆炸 性 
地 增长 。 甚 至 有 些 以 前 不 打算 支持 jQuery 的 公司 ， 现 在 已 经 完全 投资 在 这 个 库 上 。 

成 功 的 jQuery 由 它 的 缔造 者 John Resig 和 他 的 团队 ， 以 及 文 持 着 jQuery 的 庞大 社区 共同 打造 。 
我 求 励 这 本 书 的 每 一 位 读者 为 jQuery 项 目 捐赠 。 不 必 多 大 的 金额 ， 哪 伯 上 只 有 5 美元 ， 也 会 造就 不 
同 。jQuery 项 目 是 非 赢 利 的 。 绝 大 多 数 为 这 个 项 目 工作 的 人 都 是 不 领 薪水 的 志愿 者 ， 他 们 的 目标 
是 打造 一 个 极 具 价值 的 东西 ， 而 不 是 赚钱 。 

想 想 jQuery 为 我 们 节省 的 时 间 和 脑力 ， 捐 赠 几 美元 给 他 们 是 表达 感谢 的 最 好 方式 。 为 了 让 
jQuery 背后 的 开发 者 能 更 安心 地 打磨 这 一 伟大 的 产品 ,欢迎 到 http://jquery.org/donate 网 页 捐赠 ( 参 
见 图 12-2 )。 


12.1 jQuery 的 快速 成 长 273 


Sites Using jQuery - jQuery JavaScript Library 
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web. 

WordPress & - Extensible blogging platform. 

SOc Microsoft & - Visual Studio, ASP.NET MVC. 


Drupal &? - Widely popular open source 
jQuery Core E 2 Iz. f 
Twitter @ - Social micro-blogging service and ‘cordafiemmanagemnent mn 


platform 


Google &$ - Code search Mozilla @ - Firefox Addon Community 


Selectors 


PHP Manual @ - Official PHP Documentation 
anamal Dell, Inc. &? - Computer manufacturer 
Traversing PEAR - PHP Extension and Application 


Best Buy &?- Electronics retailer 
Manipulation Bes Repository 


Css ueque esterase Trac @ - One of the best issue tracking and 
Predictions 


Events wiki systems for software development 
NBC d? - Official site for the NBC television projects. 


Effects 
re network. Textpattern CMS @ - Popular flexible 


Utilities EA - EA Video Games easy-to-use content management system. 


jQuery UI Match  - Online Dating Site RoundCube 回 - Webmail 


ESPN d? - ESPN. = BIGACE Web CMS @ - Easy to use open source . | 
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图 12-1 使 用 jQuery 的 站 点 


Donate - jQuery Project 


3)*)- (C) $0 http://jquery.org/donate Bu 


( Disable + Æ Cookies + 器 CSS + ©] Forms + M Images + @ Information + “ Miscellaneous + ../ Outline + > Resize + gP Tools + $>) View Source * |j? Options 
T 
ig Donate - jQuery Project rF = 


The jQuery Project is financed entirely by donations 


and contributions from the jQuery community. | Donate 


The jQuery Project is part of the Software Freedom Conservancy which is a 501(c)(3) organization, thus donations 
made are fully tax-deductible to the extent permitted by law. If you would like to help the jQuery project, please 
feel free to donate using the following forms. 


Donate via PayPal Donate via Check 
Please send checks to: 


EB Software Freedom Conservancy, Inc. 
137 Montague Street STE 380 


Donate via Google Checkout Brooklyn, NY 11201-3548 
USA 


Donate = 
— Be sure to mention on the check that the donation is for 
Google ci ut T1000 the jQuery project. 
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图 12-2 jQuery 项 目 捐赠 页 面 
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12.2 jQuery 官方 站 点 


jQuery 官方 站 点 (jquery.com ) 提供 了 堪 称 完美 的 文档 ,介绍 如 何 使 用 它 的 API。 不 过 在 其 他 
方面 ， 这 个 站 点 在 易 用 性 和 一 致 性 方面 做 得 还 不 够 。 它 


口 Download ( 下载 ); 

QO Documentation ( 文档 ); 
O Tutorials ( 教程 ); 

口 Bug Tracker (bug 追踪 ); 
口 Discussion ( 讨论 )。 


由 5 部 分 组 成 : 


下 载 部 分 提供 了 下 载 jQuery 库 的 多 种 方法 ， 还 介绍 了 通过 CDN ( 内 容 分 发 网 络 ) 使 用 jQuery 


的 方法 。 


12.2.1 


jQuery API 文 档 子 站 


jQuery 幕后 的 团队 花费 了 海量 的 时 间 打 造 这 份 完美 到 极致 的 在 线 文档 , 供 任何 人 免费 使 用 。 它 


e 


有 当前 版 本 及 老 版 本 中 所 有 方法 的 详尽 信息 (参见 图 12-3 ) API 文档 站 点 的 网 址 是 api.jquerycom。 


jQuery API 

(4) 5)- Ce) GD Ge) GST sapi jauery.com/ wy) GR 4 

加 Disable * Æ Cookies * J CSS + ©] Forms * 3 Images * @ Information ~ Miscellaneous * of Outl Resiz Tool: f) View Se * J Options 
E jQuery API + 


jQuery 


JQUERY API © 


jQuery API 


New or Changed in 1.4 
Raw XML API Dump 
Dynamic API Browser 
jQuery API Book 


Browse the jQuery API 


All 

* Ajax 
Attributes 
Core 
css 


Data 
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jQuery API 


.add() 


Add elements to the set of matched elements. 


.addClass() 


Adds the specified class(es) to each of the set of matched elements. 


Attributes, CSS, Class Attribute 


.after() 
Insert content, specified by the parameter, after each element in t 


jQuery.ajax() 


Perform an asynchronous HTTP (Ajax) request. 


.ajaxComplete() 
Register a handler to be called when Ajax requests 


Global Ajax Event Handlers 


complete. This is an Ajax Event. 


.aiaxError( 


图 12-3 jQuery API 文 档 子 站 


jQuery 团队 还 在 jQuery 站 点 上 实现 了 相当 好 用 的 搜索 功能 ， 这 让 我 们 找 起 东西 来 更 加 容易 。 
在 这 个 站 点 上 ， 我 从 没有 在 找 东 西方 面 遇 到 问题 。 搜 索引 擎 也 相当 好 地 索引 了 jQuery 站 点 ， 通 过 
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搜索 引擎 一 样 能 够 方便 地 找到 自己 需要 的 API。 


每 一 个 函数 或 方法 都 有 自己 的 专门 页 面 , 包 括 完善 的 描述 代码 示例 以 及 来 自 开 发 者 的 评论 。 
图 12-4 展 示 的 是 css () 方 法 的 专属 页 面 。 


css0 - jQuery API 


T 


(4x)- CO ( (te) CR C hup: /apijauery.com/css] Buck a 
@ Disable + Æ Cookies » |) CSS + E] Forms + /S Images * @ Information + Miscellaneous + . Outline + $2 Resize + j^ Tools + $z) View Source + > Options 
Te 


I 图 -css0 - jQuery API [+t 


JQUERY API $y GEO 


jQuery API 


.Css() 


Raw XML API Dump Contents: Categories: CSS | Manipulation » Style Properties 
Dynamic API Browser 


New or Changed in 1.4 


B css( propertyName ) 
jQuery API Book cssl propertyName ) 
口 css( propertyName, value ) 
Browse the jQuery API 


All 

+ Ajax 

Attributes 1 

= .css( propertyName ) Returns: String 
ore 

E Description: Get the value of a style property for the first element in the set of 


Data 
matched elements. 


Dimensions 
* Effects 
.css( propertyName ) version added: 1.0 
+ Events 

Forms propertyName A CSS property. 
+ Manipulation 
+ Miscellaneous 


The .css() method is a convenient way to get a style property from the first matched element, 
ue especially in light of the different ways browsers access most of those properties (the 
Plugin Authoring getComputedStyle() method in standards-based browsers versus the currentStyle and 
+ Properties runtimeStyle properties in Internet Explorer) and the different terms browsers use for certain 


# Wà Ysiow 
© 2010, jQuery 


In 


All2-4 API 文档 中 的 css () 方 法 


12.2.2 jQuery 教程 


教程 也 是 jQuery 站 点 的 一 大 服务 ， 这 些 教程 来 自 jQuery 社 区 ， 由 jQuery 团队 发 表 ， 见 图 12-5。 
这 些 教程 涉及 了 API 的 方方面面 ， 此 外 还 有 一 些 使 用 其 他 语言 发 表 的 教程 。 如 果 你 想 用 jQuery 做 
点 新 奇 的 事情 ， 这 是 一 个 开始 的 好 地 方 。jQuery 教 程 服务 的 网 址 是 docs.jquery.com/Tutorials。 


12.2.3 jQuery 聚会 或 讨论 会 


jQuery 聚会 的 网 址 是 http:/meetups.jquery.com/。 在 发 布 1.3.2 版 本 时 ，jQuery 网 站 第 一 次 在 
Meetup 网 站 (www.meetup.com ) 的 协助 下 提供 jQuery 聚会 ( Meetups ) 服务 ， 见 图 12-6。 这 些 聚 
SAGRUEBI-EHEH BT BB ZR SX Query Ee 7c 2H2H IJ, TEGERE ERER A Query 

井 行 更 深入 的 了 解 。 我 强烈 建议 你 寻找 一 个 离 自 己 比较 近 的 jQuery 聚会 ， 参 加 一 次 。 
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Tutorials - jQuery JavaScript Library 


oag 


(Q Disable + Æ Cookies * |. CSS + 器 Forms + 


1 
| gl Tutorials - jQuery JavaScript Libr... | + 


jQuery 


DOCUMENTATION 


GETTING STARTED 


Main Page 
Downloading jQuery 
How jQuery Works 
FAQ 

Tutorials 


Using jQuery with Other 
Libraries 


Variable Types 


API REFERENCE 
jQuery Core 
Selectors 
Attributes 
Traversing 
Manipulation 
css 
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|» 


@ Disable + Æ Cookies + 1 CSS + =] Forms + 


= Images * @ Information + 


http://docs.jquery.com/Tutorials 


Miscellaneous + 2/ Outline 


Download ^ Docum 


Tutorials 


W 
+ Sf Resize * gP Tools + f 


View Source + 只 Options 


m | 


Bug Tracker 


Tutorials © 


[edit] 


ENGLISH TUTORIALS 


= jQuery Beginner Tutorial in 18 minutes @ Learn to build 


jQuery plugins from scratch - an 18 minute tutorial. 


= jQuery Reading Material @ Learn the details behind building 
jQuery plug-ins at fundamental level. 


[edit] 


General Tutorials 


These tutorials cover the fundamentals of the jQuery library - 
covering a diverse number of topics. 


* How jQuery Works by John 


sig. P 


A basic introduction to jQuery and the concepts that you need 


to know to use it. 


图 12-5 jQuery.com 解决 方 


jQuery Meetups - jQuery Meetups 


http: //meetups.jquery.com/ 


W Images * @ Information + Miscellaneous + 2” Outline 


Browse Tutorials by Language: 


English Tutorials 
O jQuery po polsku 

= Tutoriaux en Francais 
Tutoriales en espanol 


Tutorials auf Deutsch 


Tiirkce egitseller 


Guide in italiano 


Tutorial Bahasa Indonesia 


# Mà Ysiow 


案 


Bu 


TT 5 
i Resize 


Tools + $>) View Source ~ 只 Options 


1 
图 jQuery Meetups - jQuery Meetups | + 


jQuery 
QUERY MEETUPS 


jQuery users unite! Connect with other 
jQuery users and developers in your 
area through local jQuery meetups. 


View All 


LL; Transferring data from api.ning.com. 
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65 members 160 members 


© Russia 


jquery 


Homepage 


My Page 


Meetups Meetup Groups ^ Members 


GROUPS 


A 
i» 


jQuery Boston jQuery Brazil 


Programadores 
iQuery Brazil 


jQuery San 


jQuery India 
rs — Francisco 


111 mei 


user interface. 
jQuery Ul jQuery France jQuery DC 
Brazil nembers — 63 


86 members 


rA 
Query, 


图 12-6 jQuery.com RA 


jQuery 
Español 


member 


Welcome to 


jQuery Meetups 
NEW YORKER Sign Up 
= or Sign In 


jQuery NYC 


93 members 


jQuery 
Meetups 


jQuery 
Turkiye 


61 members 
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除了 jQuery 社区 组 织 的 这 些 聚 会 ,jQuery 开发 团队 每 年 也 会 在 旧金山 或 波士顿 组 织 一 到 两 次 
jQuery 大 会 。jQuery 大 会 吸引 少 而 精 的 人 群 参 会 ， 人 数 一 般 为 230 ~ 300， 这 些 人 大 都 是 来 自 于 
jQuery 核心 团队 或 外 部 社区 的 、 专 注 于 jQuery 有 关 议 题 的 大 演讲 家 。jQuery 大 会 大 大 促进 了 那些 
专职 开发 jQuery 的 专家 和 新 加 入 的 开发 者 之 间 的 交流 .jQuery 团队 还 在 jQuery 网 站 上 专门 为 jQuery 
大 会 开辟 了 一 角 , 介绍 大 会 的 见闻 ， 见 图 12-7。 还 有 一 些 别 的 有 关 JavaScript 开 发 的 专家 会 议 ， 而 
jQuery 大 会 是 唯一 专注 于 jQuery 的 大 会 。 


jQuery Conference: Boston 2010 


aR © CO (http://eventsjquery.org/2010/boston/ — — Wy) GM Goose a) i 


PLATINUM SPONSORS 


Hilton Boston Logan Airport 。 1-617-568-6700 * One Hotel Drive, Boston, 
Massachusetts 


javascript consulting 


| .annendTo/ 1 


C Done 
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图 12-7 官方 jQuery 大 会 网 站 


12.2.4 ”bug 追 踪 系 统 


在 使 用 jQuery 库 的 过 程 中 ,你 可 能 会 在 编程 过 程 中 过 到 jQuery 的 bug。jQuery 团 队 创 建 了 一 个 
bug 追 踪 系 统 (参见 图 12-8 ), jQuery 用 户 可 以 提交 bug 到 这 个 系统 , 这样 他 们 就 能 在 将 来 的 版 本 中 
修正 。 追 踪 bug 很 重要 ， 而 jQuery 有 着 如 此 大 的 用 户 社区 ， 使 用 bug 追 踪 系 统 有 组 织 地 提交 bug 给 
jQuery 开发 团队 当然 是 非常 必要 的 。jQuery 的 bug 追 踪 系 统 网 址 是 http:/bugs.jquery.comnewticket? 
redirectedfrom=。 


12.2.5 jQuery 论坛 
jQuery 团队 还 架设 了 一 个 论坛 (参见 图 12-9 )， 在 那里 可 以 发 表 任何 有 关 jQuery 的 东西 ， 包 括 
赞扬 的 话 、 问 题 、 教 程 、 代 码 示例 等 。 这 里 是 各 种 技术 水 平 的 jQuery 开发 者 相互 交流 的 好 地 方 。 
本 书写 作 时 , jQuery 论坛 已 经 有 65 000 多 个 主 贴 和 143 236 篇 回复 。 这 是 一 个 相当 活跃 的 社区 ， 
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只 需 免费 注册 一 个 账号 就 可 参与 其 中 。jQuery 论 坛 的 网 址 是 http:/forum.jquery.comy。 


jQuery - Development 


4)*)- (eO Cx) Gf) GL tp: //dev jquery.com/ WY 


Q Disable + fS Cookies + L CSS + E] Forms + | Images + @ Information v = Miscellaneous * / Outline » 22 Resize » gP Tools + {2) View Source * ¿> Options 


TaT 
图 jQuery - Development + 


jQuery el es [ee [EUER 
BUG TRACKER Search Tickets EE: 


Start Page Index by Title | Index by Date ^ Last Change 


TRACKER ACCOUNT 


Login Note: You must register and login in order to submit, edit, or comment on a ticket. 
About Trac 


paises Note: jQuery Ul now has its own Bug Tracker. Please use that tracker for Ul related tickets. 


Help/Guide The jQuery development process is known for moving fast. We try to quickly resolve bugs and 


Register implement new features to keep jQuery lively and vital. Please visit the following links for 
everything that you need to know about the jQuery development process. 
BUG TRACKER 
» Source Code - This is where you can find multiple versions of the jQuery code and plugins, 


Wiki including the + jQuery Git Repository. 


Roadmap »Recent Changes - These are all the recent changes that have been committed to the Git 


Browse Source repository. 


View Tick 
nates Releases - This is the list of releases that are currently in development, along with the various 


Search bugs that are being resolved to achieve them (unfortunately out of date). 


Timeli 
e Bug Tracking - This is where all bugs and new feature requests go. If you have any doubts, feel 


free to run it by the 7? dev mailing list 
> Recent Tickets - This is a time line of recent bug reports and feature enhancement requests. 
3 Wa Yslow 
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图 12-8 jQuery.com 的 bpug 追 踪 系 统 


jQuery Forum 


4)r)- Ce) ( (te) (图 | hip://forum.jquery.com/ gu) 


Q 


Q Disable * Æ Cookies * |) css + Forms + /3 Images * @ Information ~ Miscellaneous Resize ~ Tools + {2} View Source * ..? Options 


四 jQuery Forum [+ 


Outline * 


jQuery gm 


JQUERY FORUM 7/5, TT © 


somn [ alt Forums Ss Ga [ee 


Password: 
Getting Started 
Forgot Password? 


口 keep me signed in 
Posts: 1869 Replies: 3494 


C) Use Secure Access 


Using jQuery 


Posts: 45436 Replies: 102733 


All forums Using jQuery Plugins 


Getting S 


Posts:2500 Replies: 2860. 


Using jQuery UI 


Posts: 9105 Replies: 16948 
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图 12-9 jQuery.com 论 坛 
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12.3 ”其 他 Web 设计 和 开发 资源 
下 面 是 一 些 对 开发 者 有 帮助 的 有 关 jQuery 和 其 他 Web 设 计 主 题 的 优秀 站 点 : 


口 Learning jQuery ( www.learningjquery.com ); 


口 Stack Overflow ( www.stackoverflow.com ); 

O jQuery for Designers ( www.jqueryfordesigners.com ); 
O Visual jQuery ( www.visualjquery.com ); 

U The 14 Days of jQuery ( www.jqueryl4.com ); 

O Nettuts+ ( www.nettuts.com ); 

Q Ajaxian ( www.ajaxian.com ); 


Q Forrst ( www.forrst.com ); 


O SitePoint ( www.sitepoint.com )。 


通过 创建 更 具 交 互 性 的 富 IVeb 界 面 增 强 用 己 体 验 
——— 


Smashing jQuery 


彩 绝伦 的 ]Query 


本 书 阐述 如 何 利用 少量 的 JavaScript 基 础 知识 将 jQuery 框架 整合 进 网 站 ， 以 创建 富 Web 界 面 ， 并 建立 兼容 所 有 主流 浏览 器 的 交 
互 性 网 站 。 作 者 是 一 位 具有 丰富 经 验 的 Web 设 计 师 和 开发 者 ， 通 过 一 系列 指导 性 步骤 清晰 讲述 了 添加 交互 性 以 创建 卓越 Web 应 用 
的 方法 和 技巧 。 

使 用 jQuery 可 以 节省 大 量 的 开发 时 间 ， 开 发 者 在 没有 丰富 编程 经 验 的 情况 下 也 能 编写 出 超 乎 想象 的 交互 组 件 。 本 书包 含 大 量 
实用 技巧 、 解 决 方案 和 案例 ， 可 极 大 地 促进 Web 应 用 的 开发 与 设计 。 

书 中 主要 知识 点 包括 jQuery 基础 知识 、Ajax 请 求 、 事 件 与 效果 、DOM 操 作 ( 包含 构建 下 拉 菜 单 等 任务 的 教程 ) 、lightbox 窗 
口 、 表 单 管理 、 动 态 的 表格 数据 、 鼠 标 事件 效果 、 模 态 对 话 框 、 自 定义 jQuery 插件 等 。 


Jake Rutter Web 设 计 师 和 开发 者 ， 有 9 年 多 的 用 户 界面 设计 和 前 端 开发 经 验 ， 精 通 HTML、CSS 和 JavaScript。 


图 Smashing 杂 志 专 业 策划 
& 阐释 jQuery 的 现代 技巧 和 最 佳 实践 
& 初学 者 入 门 的 捷径 


WILEY 
www.wiley.com 


ISBN 978-7-115-28065-7 
图 灵 社 区 : www.ituring.com.cn 
新 浪 微 博 : @ 图 灵 教 育 @ 图 灵 社 区 

反馈 /投稿 /推荐 信箱 : contact@turingbook.com 

热线 ，(010)51095186 转 604 9787115 280657» 


LU 4v 计算 机 /网 络 技 术 /jQuery ISBN 978-7-115-28065-7 


人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 定价 :59.00 元 


